Web Components Series (8) - Style Settings for Custom Components

foreword

Through the previous study, I also have a certain understanding of the related concepts and knowledge points of custom components. Today we will learn several methods for setting styles for custom elements and their sub-elements.

Add styles directly to custom labels

index.html：

<style>
    my-card{
        display: block;
        margin: 20px;
        width: 200px;
        height: 200px;
        border: 3px solid #000;
    }
</style>
<my-card></my-card>
<script src="./index.js"></script>

index.js：

class MyCard extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({ mode: "open" });
    }
}

window.customElements.define("my-card", MyCard);

The resulting style takes effect:

It should be noted that: is a custom element inherited from HTMLElement, and its style.display defaults to inline.

From the above results it can be deduced that:

1. Add a class to the custom element, and then set the style by the class name to take effect;
2. Adding inline styles to custom elements can take effect;
3. Add a style to this in the custom element constructor to take effect.

Set styles for child elements inside a custom element

Set by class name in the main DOM

Add the following styles to the style tag:

<style>
    my-card {
        display: block;
        margin: 20px;
        width: 200px;
        height: 200px;
        border: 3px solid #000;
    }
    .card-header {
        padding: 10px;
        font-weight: bold;
        background-color: yellow;
    }
</style>
<my-card></my-card>

<script>
    class MyCard extends HTMLElement {
        constructor () {
            super();
            this.shadow = this.attachShadow({mode: "open"});

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

Result: Not valid.

Through the previous study, we know: inside the custom element is actually a Shadow DOM, which is isolated from the main DOM , so the styles in the main DOM do not affect the Shadow DOM.

Add style tags to Shadow DOM using JS

There are two scenarios here: using JS in the main DOM and using JS in the Custom Elements constructor.

The first: use JS in the main DOM to add style tags to the Shadow DOM:

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

<script>
    class MyCard extends HTMLElement {
        constructor () {
            super();
            this.shadow = this.attachShadow({mode: "open"});

            let headerEle = document.createElement("div");
            headerEle.className = "card-header";
            headerEle.innerText = "My Card";
            this.shadow.appendChild(headerEle);
        }
    }
    window.customElements.define("my-card", MyCard);
    // 给 Shadow DOM 增加 style 标签
    let styleEle = document.createElement("style");
    styleEle.textContent = `
        .card-header{
            padding:10px;
            background-color: yellow;
            font-size: 16px;
            font-weight: bold;
        }
    `;
    document.querySelector("my-card").shadowRoot.appendChild(styleEle);
</script>

The effect is as follows:

The second: use JS to add style tags in the Custom Elements constructor:

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

<script>
    class MyCard extends HTMLElement {
        constructor () {
            super();
            this.shadow = this.attachShadow({mode: "open"});
            let styleEle = document.createElement("style");
            styleEle.textContent = `
                .card-header{
                    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>

The effect is as follows:

As far as the above two methods are concerned, the second method is more in line with the characteristics of componentization, and pay attention when using the first method, if the code that adds the style tag is placed before the definition of Custom Elements, an error will be reported (the custom element cannot be found) ).

Import CSS files

Here, JS is used to create a link tag, and then a CSS file is introduced to set styles for the sub-elements inside the custom element. The code is as follows:

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

<script>
    class MyCard extends HTMLElement {
        constructor () {
            super();
            this.shadow = this.attachShadow({mode: "open"});
            let linkEle = document.createElement("link");
            linkEle.rel = "stylesheet";
            linkEle.href = "./my_card.css";
            this.shadow.appendChild(linkEle);


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

my_card.css code is as follows:

.card-header{
    padding:10px;
    background-color: yellow;
    font-size: 16px;
    font-weight: bold;
}

The effect is as follows:

Of course, you can also use JS in the main DOM to introduce CSS files to Shadow DOM, but this is not in line with the characteristics of componentization, so skip it.

concluding remarks

The above is a summary of the basic methods for styling custom elements and their child 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 official account is " Programming Samadhi ", welcome to pay attention, I hope you can give me more advice!