“This is the 30th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

In the previous section we saw how to style a custom component by styling the custom tag in the main DOM:

<style>
    my-card {
        display: block;
        margin: 20px;
        width: 200px;
        height: 200px;
        border: 3px solid # 000;
    }
</style>
<my-card></my-card>
Copy the code

Although the purpose of the style setting is achieved, there is a drawback: the style of the custom tag is written down and not flexible enough.

The ability to control the style of custom tags within custom components is relatively flexible and implements the “wrap, insulate” component principle. Today, we will learn how to implement style control for custom tags within custom components.

Before we get started, let’s review the overall structure of Shadow DOM:

CSS selector for Shadow DOM

Today’s focus is on a few selectors related to the Shadow DOM.

:hostPseudo class selector

Select the Shadow Host element that uses this section of CSS internally, which is essentially a custom tag element. Usage:

:host {
    display: block;
    margin: 20px;
    width: 200px;
    height: 200px;
    border: 3px solid # 000;
}
Copy the code

Note: The :host selector only works when used in the Shadow DOM.

Such as:

Alternatively, we can style Shadow host’s children using the :host child selector, for example:

The :host pseudo-class selector has the following compatibility:

:host() pseudo-class function

The :host() function gets the Shadow host of the given selector. For example:

<my-card class="my-card"></my-card>
<my-card></my-card>

<script>
    class MyCard extends HTMLElement {
        constructor () {
            super(a);this.shadow = this.attachShadow({mode: "open"});
            let styleEle = document.createElement("style");
            styleEle.textContent = ` :host(.my-card){ display: block; margin: 20px; width: 200px; height: 200px; border: 3px solid #000; } :host .card-header{ border: 2px solid red; padding:10px; background-color: yellow; font-size: 16px; font-weight: bold; } `;
            this.shadow.appendChild(styleEle);


            let headerEle = document.createElement("div");
            headerEle.className = "card-header";
            headerEle.innerText = "My Card";
            this.shadow.appendChild(headerEle); }}window.customElements.define("my-card", MyCard);

</script>
Copy the code

The :host(.my-card) only selects custom elements of the class named my-card, and it can also be followed by child selectors to select its own child elements under the node.

Note that: :host() is mandatory, otherwise the selector function is invalid. For example:

The :host() pseudo-class function has the following compatibility:

:host-context()Pseudo-classes function

Used to select a custom element inside a particular ancestor, the ancestor element selector is passed in as an argument. For example:

<div id="container">
    <my-card></my-card>
</div>
<my-card></my-card>
<script>
    class MyCard extends HTMLElement {
        constructor () {
            super(a);this.shadow = this.attachShadow({mode: "open"});
            let styleEle = document.createElement("style");
            styleEle.textContent = ` :host-context(#container){ display: block; margin: 20px; width: 200px; height: 200px; border: 3px solid #000; } :host .card-header{ border: 2px solid red; padding:10px; background-color: yellow; font-size: 16px; font-weight: bold; } `;
            this.shadow.appendChild(styleEle);


            let headerEle = document.createElement("div");
            headerEle.className = "card-header";
            headerEle.innerText = "My Card";
            this.shadow.appendChild(headerEle); }}window.customElements.define("my-card", MyCard);

</script>
Copy the code

:host-context(#container) only applies to custom elements whose id is container.

Note: this argument is also mandatory, otherwise the whole selector function does not take effect.

The compatibility is as follows:

:host 和 :host()Necessity of coexistence

My-card {} :host(.my-card){} :host(.my-card){}

The answer is no!! .my-card (Shadow root) :host (Shadow host).my-card (Shadow root) :host (Shadow host)

conclusion

This is the CSS selector for Shadow Host.

  • :hostMaximum range, matching all custom element instances;
  • :host()Select only custom elements that contain specific selectors themselves;
  • :host-context()Select a custom element that has a specific selector parent element.

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!