使用::part伪元素改变Shadow DOM的CSS样式

本文欢迎分享与聚合，请勿全文转载，尊重版权，圈子就这么大，若急用可以联系授权或购买版权。

一、历史-CSS变量穿越Shadow DOM

很早就开始关注如何让Shadow DOM外部的CSS代码改变Shadow DOM里面元素的样式。

一番探查下来，发现就CSS变量有穿透的作用。

举个例子，自定义了一个按钮，为 元素：

按钮

为了还保持原本按钮无障碍访问特性，因此使用Shadow DOM插入了一个原生的 按钮，并配置默认的一些样式。相关JavaScript代码如下（假设 元素对象是button）：

var shadow = button.attachShadow({ mode: 'closed' });
// Shadow DOM中的样式和按钮 
shadow.innerHTML = `
button {
    padding: 9px 1em;
    border: var(--ui-button-border, 1px solid #ccc);
    border-radius: var(--ui-button-radius, 4px);
    background-color: var(--ui-button-background, #fff);
    color:  var(--ui-button-color, #333);
}

${button.textContent}`;

此时的Shadow DOM结构如下图所示。

此时，通过在外部设置CSS变量就可以改变Shadow DOM内元素的样式，假设设置了如下HTML和CSS：

按钮

[type="primary"] {
    --ui-button-border: 1px solid transparent;
    --ui-button-background: deepskyblue;
    --ui-button-color: #fff;
}

则原始按钮和设置CSS自定义属性改变样式后的按钮对比效果如下所示。

因此，很长一段时间内，我都以为目前只有CSS变量可以穿透Shadow DOM改变里面的样式。

后来经 同事 提醒，浏览器已经支持了 ::part 伪元素。

我一查看，果然，瞧着绿油油的一片，是不是有金山银山的感觉：

只要主流版本支持，就已经可以玩起来了。

//zxx: 如果你看到这段文字，说明你现在访问是体验糟糕的垃圾盗版网站，你可以访问原文获得很好的体验：https://www.zhangxinxu.com/wordpress/?p=9789（作者张鑫旭）

二、::part伪元素语法

CSS ::part 这个选择器就是用来改变Shadow DOM元素样式的。

语法如下：

::part(xxxx)

xxxx 是Shadow DOM元素的 part 属性值。

举个例子，例如上面CSS变量改变自定义元素样式的代码如果改用 ::part 伪元素实现就可以这么处理：

class UiButton extends HTMLElement {
    constructor() {
        super();
    }
    connectedCallback () {
        let shadow = this.attachShadow({ mode: 'closed' });
        // Shadow DOM中的样式和按钮
        shadow.innerHTML = `
            button {
                padding: 9px 1em;
                border: 1px solid #ccc;
                border-radius: 4px;
                background-color: #fff;
                color: #333;
            }
        
        ${this.textContent}`;
    }
};
// 注册
customElements.define('ui-button', UiButton);

此时，重置按钮的样式就无需借助CSS变量穿透了，直接使用 ::part 伪元素即可，示意如下：

按钮
按钮 - type="parimary"

[type="primary"]::part(button) {
    border-color: transparent;
    background-color: deepskyblue;
    color: #fff;
}

效果如下所示：

眼见为实，您可以狠狠地点击这里： CSS ::part改变按钮Shadow DOM样式demo

//zxx: 如您发现文章盗版，欢迎反馈或向平台举报

三、深入与样式设置细节

使用Shadow DOM开发自定义元素组件的时候，常常会使用 元素进行占位，此时， 内部的元素样式是否可以使用 ::part 伪元素设置呢？

我们直接看一个例子，此例子源自“ HTMLUnknownElement与HTML5自定义元素 ”最后的 自定义元素。

是这样的，组件模板HTML如下：

    
        :host { display: flow-root; }
        img { float: left; margin-right: 10px; }
        p { margin: .5em 0;}
    
    
    这是显示描述信息

其中描述信息使用 元素占位，大家可以理解为“替身使者”。

然后页面中的CSS和HTML是这样的：

/* 下面3段CSS语句哪个可以影响文字样式呢？ */
zxx-info::part(description) {
    color: deepskyblue;
}
zxx-info::part(description) p {
    color: red;
}
zxx-info p {
    border-bottom: 1px dashed;
}

    
张鑫旭-鑫空间-鑫生活
    帅锅一枚
    文字颜色红色么？下划线有了么？

其中，对于

元素，有4处CSS都尝试对其进行样式设置，分别是：

1. Shadow DOM中的 p { margin: .5em 0;}
2. 外部CSS样式中的 zxx-info::part(description) ，也即是 元素，说不定颜色可以继承下去。
3. 外部CSS样式中的 zxx-info::part(description) p {}
4. 外部CSS样式中的 zxx-info p {}

请问大家，上面4段CSS，哪些是可以让 中的文字发生样式变化的？

出人意料的结果

结果是第2行和第4行的选择器语句有效。

最终样式效果如下截图所示：

文字是深天蓝色，说明 zxx-info::part(description) 可以影响里面文字，同时文字有下划虚线，说明 zxx-info p 选择器的匹配是有效的。

眼见为实，您可以狠狠地点击这里： CSS ::part与Shadow DOM slot样式demo

深究slot特性

我们来深入探究下。

此时， 自定义元素的完整DOM结构示意是这样的：

可以看到， 元素中有灰色的

元素（参见上图区域A），这些

元素大家可以理解为“替身使者”，“本体”

元素此时依然作为非Shadow DOM元素显示在在 元素中（参见上图区域B）。

无论是对“替身使者”还是“本体”

元素进行样式设置，都可以改变文字显示的颜色。

只是区域A中这些

元素有形无实（浏览器置灰了），无法通过 zxx-info::part(description) p {} 这个选择器进行匹配，因此， color:red 设置红色是无效的。

虽然无法使用标签进行匹配，但是，却可以继承祖先元素，也就是可以继承 元素的颜色、行高，字体等样式，因此，最终的文字颜色是可以受下面CSS影响的，最终表现为深天蓝色：

zxx-info::part(description) {
    color: deepskyblue;
}

至于 zxx-info p{} 有效，则是因为区域B中的

元素就是 元素的子元素。

四、无中生有学到的知识

学习CSS ::part 伪元素，无意中让自己搞清楚了 元素的样式渲染规则，真是额外的收获。

回头有机会可以把 元素额外拎出来讲下。

一番体验下来，CSS ::part 伪元素比预想的要好看，确实可以用起来了。

等以后IE浏览器拜拜了，Web将会是Web Components的舞台，届时，Shadow DOM相关知识估计会掀起一小波热度。

现在嘛，环境不允许，火不起来，都是小范围传播。

好，就说这么多。

祝大家春节快乐，记得分享哦~

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。

本文地址： https://www.zhangxinxu.com/wordpress/?p=9789

（本篇完）