关于javascript:Web-Components-系列八-自定义组件的样式设置

前言

通过后面的学习，对自定义组件的相干概念和知识点也有了肯定理解，明天咱们就来学习一下给自定义元素及其子元素设置款式的几种办法。

间接给自定义标签增加款式

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);

后果款式失效：

须要留神的是： 继承自 HTMLElement 的自定义元素，其 style.display 默认为 inline。

由以上后果能够推论出：

1. 给自定义元素增加 class，而后通过 class 名称设置款式能够失效；
2. 给自定义元素增加行内款式，能够失效；
3. 在自定义元素构造函数中给 this 增加款式，能够失效。

给自定义元素外部子元素设置款式

在主 DOM 通过类名设置

在 style 标签中减少如下款式：

<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>

后果：不失效。

通过后面的学习，咱们晓得： 自定义元素外部实际上是一个 Shadow DOM，它和主 DOM 是互相隔离的 ，所以，主 DOM 中的款式是影响不到 Shadow DOM 的。

应用 JS 给 Shadow DOM 减少 style 标签

这里分为两种场景：在主 DOM 应用 JS、在 Custom Elements 构造函数中应用 JS。

第一种：在主 DOM 应用 JS 给 Shadow DOM 减少 style 标签：

<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>

成果如下：

第二种：在 Custom Elements 构造函数中应用 JS 减少 style 标签：

<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>

成果如下：

就以上两种形式来说，第二种更合乎组件化的特色，并且应用第一种形式时要留神，如果将增加 style 标签的代码放在定义 Custom Elements 之前会报错（找不到自定义元素）。

引入 CSS 文件

这里应用 JS 创立 link 标签，而后引入 CSS 文件给自定义元素外部的子元素设置款式，代码如下：

<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 代码如下：

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

成果如下：

当然，这里也能够在主 DOM 中应用 JS 给 Shadow DOM 引入 CSS 文件，然而，这样做不合乎组件化的特色，所以略过。

结束语

以上就是给自定义元素及其子元素进行款式设置的根本办法总结。

~

~ 本文完，感激浏览！

~

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王 ，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！