Web コンポーネントのスロットについて話しましょう (詳細な例)

この記事では、Slots に関する関連知識をお届けします。Slots の機能は、テンプレート要素に値を渡し、テンプレート要素の柔軟性と汎用性を高めることです。皆様のお役に立てれば幸いです。

Vue に詳しい学生は「スロット」の概念を知っているはずです。スロットを使用すると、ページ コンテンツの構成をより柔軟にすることができます。

Web コンポーネント システムにはスロットという概念もあります。今日はスロットについて詳しく見ていきます。この記事には主に次の内容が含まれています:

• なぜスロットを使用するのですか?
• Slots の関連機能

Slots の役割

最初にテンプレート要素を見てみましょう:

<template>
    <p>MY CARD</p>
    <p>
        My name is 编程三昧。    </p></template>

これはテンプレートであるため、これは、多くの場所で使用されることを意味しますが、ここで問題が発生します。 このテンプレートを使用するすべての場所で、テンプレートのコンテンツが表示されます つまり、全員の名前が「プログラミング サマーディ」と呼ばれるわけではありません。 。

この場合、他の名前の人はこのテンプレートを使用できません。明らかに、これはテンプレートを使用する本来の意図に反しています。このテンプレートの使用範囲は狭すぎ、性別不問です。

このテンプレートをユニバーサルにするためには、.detailsに表示される内容がユニバーサルかどうかがポイントとなります。

「プログラミング サマーディ」を動的コンテンツとして設定できるかどうか、頭を使って考えてください。このテンプレートを使用する人は誰でも、自分の名前を渡すことができます。たまたま、次のように Slots (スロット) でこの効果を実現できます:

<!--在模板中使用 slot 进行占位--><template>
    <p>MY CARD</p>
    <p>
        My name is <slot>编程三昧</slot>。    </p></template><!--在使用上面模板的自定义元素中给 slot 传值--><my-card>
    <span>插槽传值</span></my-card><my-card>
    <span>web Components</span></my-card>

対応する JS コードは次のとおりです:

class MyCard extends HTMLElement {
    constructor () {
        super();
        const template = document.getElementById('cardTmp');
        const templateContent = template.content;

        this.attachShadow({mode: 'open'}).appendChild(
            templateContent.cloneNode(true)
        );
    }}customElements.define('my-card', MyCard);

効果を達成します:

上記の例を通じて、スロットの役割を 1 つの文に要約できます: スロットの役割は、値をテンプレート要素に転送し、テンプレートの柔軟性と汎用性を強化することです。要素。

スロットの関連機能

スロットの関連機能について、質疑応答形式で一つずつ説明していきます。

スロットの name 属性の役割は何ですか?

指定された名前を持つスロットは「名前付きスロット」と呼ばれ、名前はスロットの一意の識別子です。

スロットのコンテンツを導入する要素で、Slots.name と同じ値のスロット属性を使用する必要があります。次のコードを見てください:

<template>
    <p>MY CARD</p>
    <p>
        My name is <slot>19</slot>。    </p></template><my-card>
    <span>编程三昧</span></my-card><my-card>
    <span>web Components</span></my-card><script>
    class MyCard extends HTMLElement {
        constructor () {
            super();
            const template = document.getElementById(&#39;cardTmp&#39;);
            const templateContent = template.content;

            this.attachShadow({mode: &#39;open&#39;}).appendChild(
                templateContent.cloneNode(true)
            );
        }
    }
    customElements.define(&#39;my-card&#39;, MyCard);</script>

実行効果:

受信スロット属性値がスロットの名前属性値と一致しないため、スロットは挿入されていません。

値を渡すときのスロット属性値は、Slots の name 属性値と一致している必要があります。

スロットに値を渡さないとどうなりますか?

上記 2 つのカスタム要素 my-card の spam 要素を削除し、値を渡さないようにします。つまり、次のように変更します。

<my-card></my-card>

後の効果実行中:

ご覧のとおり、スロットに値が渡されない場合、スロットは独自のプリセット コンテンツを表示します。

実際、上記の 2 つの点を組み合わせると、次の結論を導き出すこともできます。 スロットへの参照がある場合、名前に対応するスロットの内容のみが表示され、残りの内容は表示されます。スロットは表示されません。

スロットは通常の DOM で使用できますか?

ここでの「通常の DOM」は、Shadow DOM に関連しており、ページが配置されているドキュメント オブジェクトを指します。

コードは次のとおりです:

<slot>Slots 预设值</slot><p>bcsm</p>

は次のように表示されます:

概要: 通常の DOM でスロットを使用します。ページ上に直接レンダリングされ、スロット効果はありません。

スロットはテンプレートで使用する必要がありますか?

先ほどの例では、スロットはテンプレート内にありますが、これはスロットを有効にするにはテンプレート内で使用する必要があるという意味ですか?

通常の DOM のスロットが無効であることが確認されたため、Shadow DOM でテストを行います。コードは次のとおりです。

    <h1 id="不在-Templates-中使用-Slots">不在 Templates 中使用 Slots</h1>
    <p>
        <slot>这是 Slots 预设值</slot>
    </p>
    <my-paragraph>
        <span>编程三昧</span>
    </my-paragraph>
    <script>
        class MyParagraph extends HTMLElement {
            constructor () {
                super();
                const template = document.getElementById(&#39;templ&#39;);

                this.attachShadow({mode: &#39;open&#39;}).appendChild(
                    template.cloneNode(true)
                );
            }
        }
        customElements.define(&#39;my-paragraph&#39;, MyParagraph);
    </script>

表示効果は次のとおりです。

表示効果から、スロットを含む通常の DOM ノードを Shadow DOM に追加すると、スロットには受信値が表示されます。これは、スロットが有効であることを意味します。

概要:

スロットは Shadow DOM で有効になり、テンプレートで使用する必要はありません。

同じ名前の複数のスロットをカスタム要素で使用できますか?

コードを見てください:

<template>
    <p>MY CARD</p>
    <p>
        My name is <slot>编程三昧</slot>。    </p></template><my-card>
    <span>插槽传值1</span>
    <span>插槽传值2</span></my-card><script>
    class MyCard extends HTMLElement {
        constructor () {
            super();
            const template = document.getElementById(&#39;cardTmp&#39;);
            const templateContent = template.content;

            this.attachShadow({mode: &#39;open&#39;}).appendChild(
                templateContent.cloneNode(true)
            );
        }
    }
    customElements.define(&#39;my-card&#39;, MyCard);</script>

表示効果:

結論:

A スロットは複数の受信値を受け取ることができ、解析されて表示されます 。

Slots 的传值元素必须是自定义元素的直接子元素吗？

上面的例子中，所有给 Slots 传值的元素都是自定义元素的子元素，那是不是非直接子元素不行呢？

代码如下：

<template>
    <p>MY CARD</p>
    <p>
        My name is <slot>编程三昧</slot>。    </p></template><my-card>
    <p>
        <span>插槽传值1</span>
    </p></my-card><script>
    class MyCard extends HTMLElement {
        constructor () {
            super();
            const template = document.getElementById(&#39;cardTmp&#39;);
            const templateContent = template.content;

            this.attachShadow({mode: &#39;open&#39;}).appendChild(
                templateContent.cloneNode(true)
            );
        }
    }
    customElements.define(&#39;my-card&#39;, MyCard);</script>

运行效果（传值失效）：

结论：给 Slots 传值的元素必须是自定义元素的直接子元素，否则传值失效。

更多编程相关知识，请访问：编程视频！！

以上がWeb コンポーネントのスロットについて話しましょう (詳細な例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。