Shulou(Shulou.com)06/01 Report--

This article mainly introduces what is the use of Slots in Web Components. It is very detailed and has a certain reference value. Interested friends must finish reading it!

The role of Slots

Let's first look at a template element:

MY CARD

My name is programming Samadhi.

Since it is a template, it means that it will be used in many places, but there will be a problem: all places that use this template will display the contents of the template, that is, not everyone's name is "programming Samadhi".

In this case, people by other names cannot use this template, which obviously runs counter to the original intention of using the template, which is too narrow to be universal.

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

Think about whether we can set the "programming Samadhi" as dynamic content, and those who use this template will pass in their own names. Exactly, Slots (slot) can achieve this effect, as follows:

MY CARD

My name is programming Samadhi.

Slot pass value web Components

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

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

Related characteristics of Slots

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

What is the purpose of the name attribute of Slots?

A Slots with a specified name is called a named slot, and name is the unique identity of the slot.

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

MY CARD

My name is 19 .

Programming web Components 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)

Running effect:

Slots was not inserted because the value of the slot property passed in does not match the value of the name property of Slots.

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

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

Remove the span element from the above two custom elements my-card and change it to this without passing any value:

The effect after running:

As you can see, if you don't pass a value to Slots, Slots displays 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 Slots content of the corresponding name will be displayed, and the rest of the Slots will not be displayed.

Can I use Slots in normal DOM?

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

The code is as follows:

Slots preset bcsm

The display is as follows:

Summary: if Slots is used in normal DOM, it will be rendered directly on the page without slot effect.

Does Slots have to be used in Templates?

In the example we saw earlier, Slots is in Templates, does that mean that Slots must be used in Templates to take effect?

Since we have verified that Slots in normal DOM is invalid, we do a test in Shadow DOM with the following code:

Do not use Slots in Templates this is the Slots default

Programming class MyParagraph extends HTMLElement {constructor () {super (); const template = document.getElementById ('templ'); this.attachShadow ({mode:' open'}). AppendChild (template.cloneNode (true)) }} customElements.define ('my-paragraph', MyParagraph)

The display effect is as follows:

As you can see from the display effect, after the normal DOM node containing Slots is appended to Shadow DOM, Slots displays the passed value, which means that Slots is in effect.

Summary: Slots takes effect in Shadow DOM, not necessarily in Templates.

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

Look at the code:

MY CARD

My name is programming Samadhi.

Slot pass value 1 slot pass value 2 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)

Display effect:

Conclusion: a Slots can receive multiple input values, and all of them will be parsed and displayed.

Does the value-passing element of Slots have to be a direct child of a custom element?

In the above example, all elements that pass values to Slots are child elements of a custom element, so is it not possible to do so without direct child elements?

The code is as follows:

MY CARD

My name is programming Samadhi.

Slot pass value 1

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)

Running effect (invalid value transfer):

Conclusion: the element that passes the value to the Slots must be a direct child of the custom element, otherwise the value is invalid.

The above is all the content of this article "what is the use of Slots in Web Components?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.