preface

In the previous section, we learned how to set styles for custom components. At that time, we set the styles of custom labels in the main DOM:

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

Although the purpose of style setting is realized, there is a disadvantage: the style of custom label is written dead and not flexible enough.

If you can control the style of user-defined labels inside the user-defined component, it will be relatively flexible, and it can also realize the component principle of "encapsulation and isolation". Today, let's learn how to control the style of user-defined labels inside the user-defined component.

Before starting the text, let's review the overall structure of Shadow DOM:

CSS selector for Shadow DOM

Today's focus is on recognizing several selectors related to Shadow DOM.

: host pseudo class selector

Select the Shadow host element that uses this part of CSS internally, which is actually a custom label element. The usage is as follows:

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

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

For example:

In addition, you can use the form of: host sub selector to set the style for the sub elements of Shadow Host, such as:

: the compatibility of the host pseudo class selector is as follows:

: host() pseudo class function

: host() is used to get the Shadow Host of a given selector. For example, the following code:

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

<script>
    class MyCard extends HTMLElement {
        constructor () {
            super();
            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>

: host (. My card) will only select the custom element with the class name of my card, and it can also be followed by a sub selector to select the sub elements under its own node.

It should be noted that the parameter of:: host() must be passed, otherwise the selector function will fail, such as:

: host() pseudo class functions are compatible as follows:

: host context() pseudo class function

Used to select custom elements within a specific ancestor. The ancestor element selector is passed in through parameters. For example, the following code:

<div id="container">
    <my-card></my-card>
</div>
<my-card></my-card>
<script>
    class MyCard extends HTMLElement {
        constructor () {
            super();
            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>

: host context (#container) will only take effect for user-defined elements whose id is container. The effect is as follows:

Note: the parameters here are also required, otherwise the whole selector function will not take effect.

Its compatibility is as follows:

The necessity of coexistence of: host and: host()

After reading the above introduction, many people may have a doubt: host (. My card) {} can't be used directly: host My card {} instead?

The answer is no!!!, Because:: host My card essentially means to find My card (Shadow root): host (Shadow Host). The structure of Shadow DOM is contradictory.

summary

The above is about the CSS selector of Shadow Host. To summarize:

• : host has the largest range and matches all user-defined element instances;
• : host() selects only custom elements that contain a specific selector;
• : host context() selects a custom element that has a specific selector parent element.

~End of this article, thank you for reading!