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

preface

Through the previous study, we also have a certain understanding of the concepts and knowledge of custom components, today we will learn a custom element and its children to set the style of several methods.

Add styles directly to custom tags

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>
Copy the code

Index. Js:

class MyCard extends HTMLElement {
    constructor() {
        super(a);this.shadow = this.attachShadow({ mode: "open"}); }}window.customElements.define("my-card", MyCard);
Copy the code

Result style in effect:

Note that the style.display default for custom elements that inherit from HTMLElement is inline.

It can be inferred from the above results:

  1. Adding a class to a custom element and then styling it with the class name takes effect.
  2. Adding inline styles to custom elements works.
  3. Styling this in the custom element constructor works.

Styles the inner child of a custom element

Set in the main DOM by class name

Add the following style 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(a);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>
Copy the code

Result: not effective.

As we have learned, the interior of a custom element is actually a Shadow DOM. It is isolated from the main DOM, so styles in the main DOM do not affect the Shadow DOM.

Add style tags to Shadow DOM using JS

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

Add style tags to the Shadow DOM using JS in the main 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(a);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);
    // Add a style tag to Shadow DOM
    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>
Copy the code

The effect is as follows:

Use JS to add style tags to the 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(a);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>
Copy the code

The effect is as follows:

The second method is more componentized than the other, and when using the first method, be aware that you will get an error if you place the code that adds the style tag before you define Custom Elements.

Importing CSS files

Here we use JS to create the link tag, and then import a CSS file to style the child elements inside the custom element 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(a);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>
Copy the code

The code for my_card.css is as follows:

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

The effect is as follows:

Of course, it is also possible to use JS in the main DOM to introduce CSS files to the Shadow DOM, but this does not match the characteristics of componentization, so it is skipped.

conclusion

That concludes the basic approach to styling a custom element and its children.

~

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!