关于javascript:WebComponents-系列九-Shadow-Host-的-CSS-选择器

前言

在上一节咱们理解了如何给自定义组件设置款式，过后是将自定义标签的款式设置在主 DOM 中的：

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

尽管实现了款式设置的目标，然而却存在一个弊病：自定义标签的款式被写死了，不够灵便。

如果可能在自定义组件外部管制自定义标签的款式，那样的话会绝对灵便，而且也算是实现了”封装、互相隔离“的组件准则。明天，咱们就来学习一下如何在自定义组件外部实现自定义标签的款式管制。

在注释开始之前，咱们再温习一下 Shadow DOM 的整体构造：

Shadow DOM 的 CSS 选择器

明天的重点是意识与 Shadow DOM 相干的几个选择器。

:host 伪类选择器

选取外部应用该局部 CSS 的 Shadow host 元素，其实也就是自定义标签元素。用法如下：

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

留神：:host 选择器只在 Shadow DOM 中应用才有成果。

比方：

另外，能够应用 :host 子选择器 的模式来给 Shadow Host 的子元素设置款式，比方：

:host 伪类选择器的兼容性如下：

:host()伪类函数

:host() 的作用是获取给定选择器的 Shadow Host。比方上面的代码：

<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) 只会抉择类名为 my-card 的自定义元素, 且它前面也能够跟子选择器来抉择本人跟节点下的子元素。

须要留神的是：:host() 的参数是必传的，否则选择器函数生效，比方：

:host() 伪类函数的兼容性如下：

:host-context()伪类函数

用来抉择特定先人外部的自定义元素，先人元素选择器通过参数传入。比方以下代码：

<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) 只会对 id 为 container 元素下的自定义元素失效，成果如下：

留神：这里的参数也是必传的，否则整个选择器函数不失效。

其兼容性如下：

:host 和 :host()共存的必要性

看完下面的介绍后，不少人可能会有这样一个纳闷：:host(.my-card){} 不是能够间接用 :host.my-card{} 代替？

答案是 不能够！！！，因为：:host.my-card 本质上的意思是找 .my-card（Shadow root）的 :host（Shadow Host），这 Shadow DOM 的从构造上来说就曾经互相矛盾了。

总结

以上就是对于 Shadow Host 的 CSS 选择器内容，总结一下：

• :host 范畴最大，匹配所有的自定义元素实例；
• :host() 只抉择本身蕴含特定选择器的自定义元素；
• :host-context() 抉择领有特定选择器父元素的自定义元素。

~

~ 本文完，感激浏览！

~

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

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