Let's talk about Slots of Web Components (detailed examples)

This article brings you relevant knowledge about Slots. The function of Slots is to pass values ​​to template elements and enhance the flexibility and versatility of template elements. I hope it will be helpful to everyone.

Students who are familiar with Vue should all know the concept of "slot". By using slots, the organization of page content can be made more flexible.

There is also the concept of slots in the Web Components system. Today we will take a closer look at Slots. This article mainly includes the following content:

• Why use Slots?
• Related features of Slots

The role of Slots

Let’s first look at a template element:

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

Since it is a template, it means It will be used in many places, but there will be a problem here: All places that use this template will display the content in the template, that is, not everyone's name is called "Programming Samadhi" .

In this case, people with other names cannot use this template. Obviously, this goes against the original intention of using the template. The scope of use of this template is too narrow and there is no universal sex.

To make this template universal, the key point is whether the content displayed in .details is universal.

Use your brain to think about whether we can set the "Programming Samadhi" as dynamic content. Whoever uses this template can pass in his or her name. It just so happens that Slots (slots) can achieve this effect, as follows:

<!--在模板中使用 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>

The corresponding JS code is as follows:

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);

Achieve the effect:

Through the above example, we can summarize the role of Slots in one sentence: The role of Slots is to transfer values ​​​​to template elements and enhance the flexibility and versatility of template elements.

Related features of Slots

For the relevant features of Slots, I will explain them one by one in the form of questions and answers.

What is the role of the name attribute of Slots?

Slots with a specified name are called "named slots", and name is the unique identifier of the slot.

You need to use the slot attribute with the same value as Slots.name on the element that introduces slot content. Look at the following code:

<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>

Running effect:

Because the incoming slot attribute value does not match the name attribute value of Slots, so Slots is not is inserted.

The slot attribute value when passing the value must be consistent with the name attribute value of Slots.

What happens if you don’t pass a value to Slots?

Remove the span element in the above two custom elements my-card and do not pass any value, that is, change it to this:

<my-card></my-card>

The effect after running:

As you can see, if no value is passed to Slots, then Slots will display its own preset content.

In fact, combining the above two points, we can also draw a conclusion: If there is a reference to Slots, only the content of the Slots corresponding to the name will be displayed, and the remaining Slots will not be displayed.

Can Slots be used in normal DOM?

The "normal DOM" here is relative to Shadow DOM and refers to the document object where the page is located.

The code is as follows:

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

is displayed as follows:

Summary: Using Slots in normal DOM, it will be rendered directly in On the page, there is no slot effect.

Do Slots have to be used in Templates?

In the example we saw earlier, Slots are in Templates. Does that mean that Slots must be used in Templates to take effect?

Because it has been verified that Slots in normal DOM are invalid, so we do a test in Shadow DOM. The code is as follows:

    <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>

The display effect is as follows:

You can see from the display effect that after appending the normal DOM node containing Slots to the Shadow DOM, the Slots display the incoming value, which means that the Slots are effective.

Summary: Slots can take effect in Shadow DOM and do not have to be used in Templates.

Can multiple Slots with the same name be used in a custom element?

Look at the code:

<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>

Display effect:

Conclusion: A Slots can receive multiple incoming values, and It will be parsed and displayed .

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 传值的元素必须是自定义元素的直接子元素，否则传值失效。

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

The above is the detailed content of Let's talk about Slots of Web Components (detailed examples). For more information, please follow other related articles on the PHP Chinese website!