Web_Components series (9) - CSS selector of Shadow Host

foreword

In the previous section we learned how to style custom components, when the styles of custom tags were set 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 achieved, there is a drawback: the style of the custom label is written dead and not flexible enough.

If you can control the style of the custom label inside the custom component, it will be relatively flexible, and it can be regarded as realizing the component principle of "encapsulation and mutual isolation". Today, let's learn how to implement style control of custom tags inside custom components.

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

CSS selectors for Shadow DOM

Today's focus is to recognize 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: :host selector only works in Shadow DOM.

for example:

In addition, you can use the :host sub-selector to style the Shadow Host child elements, for example:

:host pseudo-class selector has the following compatibility:

: host() pseudo-class function

The role of :host() is to get the Shadow Host for the 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 my-card, and it can also be followed by a sub-selector to select the sub-elements under itself and the node.

It should be noted that the parameters of :host() are required, otherwise the selector function will fail, for example:

The compatibility of :host() pseudo-class functions is as follows:

:host-context() pseudo-class function

Used to select a custom element inside a specific ancestor. The ancestor element selector is passed in as a parameter. 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 on the custom element whose id is the container element. The effect is as follows:

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

Its compatibility is as follows:

Necessity of coexistence of :host and :host()

After reading the above introduction, many people may have such a doubt: :host(.my-card){} be directly replaced by :host.my-card{} ?

The answer is can't! ! ! , because: :host.my-card essentially means to find .my-card (Shadow Host) of :host (Shadow root). This Shadow DOM is already contradictory in structure.

Summarize

The above is about the CSS selector content of Shadow Host, to summarize:

• :host has the largest range, matching all custom element instances;
• :host() only selects custom elements that themselves contain a specific selector;
• :host-context() Selects custom elements that have specific selector parent elements.

~

~ This article is over, thanks for reading!

~

Learn interesting knowledge, meet interesting friends, and shape interesting souls!

Hello everyone, I'm King , the author of " Programming Samadhi ", my public number is " Programming Samadhi ", welcome to pay attention, and I hope you can give me more advice!