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

这篇文章发布于 2021年02月6日,星期六,00:20,归类于 CSS相关。 阅读 15355 次, 今日 3 次 一条评论

 

css part伪元素马儿开心跑占位图

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

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

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

举个例子,自定义了一个按钮,为<ui-button>元素:

<ui-button>按钮</ui-button>

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

var shadow = button.attachShadow({ mode: 'closed' });
// Shadow DOM中的样式和按钮 
shadow.innerHTML = `<style>
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);
}
</style>
<button>${button.textContent}</button>`;

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

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

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

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


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

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

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

::part选择器兼容性

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

二、::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 = `<style>
            button {
                padding: 9px 1em;
                border: 1px solid #ccc;
                border-radius: 4px;
                background-color: #fff;
                color: #333;
            }
        </style>
        <button part="button">${this.textContent}</button>`;
    }
};
// 注册
customElements.define('ui-button', UiButton);

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

<ui-button title="by zhangxinxu">按钮</ui-button>
<ui-button type="primary">按钮 - type="parimary"</ui-button>
[type="primary"]::part(button) {
    border-color: transparent;
    background-color: deepskyblue;
    color: #fff;
}

效果如下所示:

::part与按钮样式变化截图

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

三、深入<slot>与样式设置细节

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

我们直接看一个例子,此例子源自“HTMLUnknownElement与HTML5自定义元素”最后的<zxx-info>自定义元素。

是这样的,组件模板HTML如下:

<template id="tplZxxInfo">
    <style>
        :host { display: flow-root; }
        img { float: left; margin-right: 10px; }
        p { margin: .5em 0;}
    </style>
    <img part="img" loading="lazy" src="https://image.zhangxinxu.com/image/blog/zxx_240_0818.jpg">
    <slot name="description" part="description">这是显示描述信息</slot>
</template>

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

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

/* 下面3段CSS语句哪个可以影响文字样式呢? */
zxx-info::part(description) {
    color: deepskyblue;
}
zxx-info::part(description) p {
    color: red;
}
zxx-info p {
    border-bottom: 1px dashed;
}
<zxx-info>
    <p slot="description">张鑫旭-鑫空间-鑫生活</p>
    <p slot="description">帅锅一枚</p>
    <p slot="description">文字颜色红色么?下划线有了么?</p>
</zxx-info>

其中,对于<p>元素,有4处CSS都尝试对其进行样式设置,分别是:

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

请问大家,上面4段CSS,哪些是可以让<zxx-info>中的文字发生样式变化的?

出人意料的结果

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

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

颜色深天蓝,有虚线下划线

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

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

深究slot特性

我们来深入探究下。

此时,<zxx-info>自定义元素的完整DOM结构示意是这样的:

slot元素展开示意

可以看到,<slot>元素中有灰色的<p>元素(参见上图区域A),这些<p>元素大家可以理解为“替身使者”,“本体”<p>元素此时依然作为非Shadow DOM元素显示在在<zxx-info>元素中(参见上图区域B)。

无论是对“替身使者”还是“本体”<p>元素进行样式设置,都可以改变文字显示的颜色。

只是区域A中这些<p>元素有形无实(浏览器置灰了),无法通过zxx-info::part(description) p {}这个选择器进行匹配,因此,color:red设置红色是无效的。

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

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

至于zxx-info p{}有效,则是因为区域B中的 <p> 元素就是<zxx-info>元素的子元素。

四、无中生有学到的知识

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

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

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

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

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

好,就说这么多。

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

(本篇完)

分享到:


发表评论(目前一条评论)

  1. r23d说道:

    可以试试slot里面放置默认的p标签,看看4条样式有何效果,如果效果不同,这也挺让人头疼的。顺便提个小建议,demo页面能支持编辑吗?