WebComponents - 在组件公共接口中使用 CSS 自定义属性有什么优势？

Question

WebComponent可以在其封装样式中包含CSS 自定义属性。

这为组件的使用者提供了一种自定义该组件样式的方法：

• 请参阅：使用 CSS 自定义属性创建样式挂钩 |谷歌网络基础

声明

--fancy-tabs-bg: red

在主样式中意味着当shadow-root样式包括

background-color: var(--fancy-tabs-bg, #9E9E9E)

background-color将red(或--fancy-tabs-bg设置为的任何值)。

<小时 />

但是...我在同一篇文章中注意到它明确指出：

:host的一个问题是父页面中的规则更高 比元素中定义的:host规则的特异性。那是 外在风格胜出。这允许用户覆盖您的顶级 从外部造型。

再说一遍，稍后：

外部样式总是胜过影子 DOM 中定义的样式。例如，如果用户编写选择器fancy-tabs { width: 500px; }，它将胜过组件的规则：:host { width: 650px;}

所以...与其为--fancy-tabs-bg声明一个值，不如我们只是...为background-color(？) 设置一个值

真？让我们来了解一下。

这是一个WebComponent(主要复制自上面引用的文章)，其中组件的前两个实例使用CSS 自定义属性(即。--fancy-tabs-bg)，并且使用相关的CSS 属性(即background-color)。

class FancyTabs extends HTMLElement {

constructor() {
super();
this.root = this.attachShadow({mode: "open"});
}
connectedCallback() {

this.root.innerHTML = `

<style>
:host {
display: block;
width: 100px;
height: 100px;
margin: 6px;
border-radius: 10px;
}

:host([background]) {
background-color: var(--fancy-tabs-bg, #9E9E9E);
}
</style>

`;
}
}
customElements.define('fancy-tabs', FancyTabs);

fancy-tabs {
float: left;
}
fancy-tabs:nth-of-type(1) {
--fancy-tabs-bg: red;
}
fancy-tabs:nth-of-type(2) {
--fancy-tabs-bg: orange;
}
fancy-tabs:nth-of-type(3) {
background-color: green;
}

<fancy-tabs background>...</fancy-tabs>
<fancy-tabs background>...</fancy-tabs>
<fancy-tabs background>...</fancy-tabs>

没有区别，是吗？

那么为什么要使用CSS自定义属性呢？为什么要在公共界面中突出显示特定的 CSS 属性可用于用户自定义？当然，所有CSS属性都可用于用户自定义，不是吗？

我错过了什么？

Answer 1

在处理主机元素时，您不会注意到任何差异，但是当其中包含更多元素时，您可以清楚地看到CSS变量的使用：

CSS 变量可用于更新嵌套元素样式的示例。我怀疑你能在没有 CSS 变量的情况下找到更好的方法。

class FancyTabs extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({ mode: 'closed' });
const css = `
:host {
display: block;
width: 100px;
height: 100px;
margin: 6px;
border-radius: 10px;
}

:host([background]) {
background-color: var(--fancy-tabs-bg, #9E9E9E);
}
div {
padding: var(--p,0px);
border:var(--b,0px) solid;
}`
this.styles = document.createElement('style');
this.styles.innerHTML = css;
}
connectedCallback() {
const div = document.createElement('div');
div.innerHTML = this.innerHTML;
this.shadow.appendChild(this.styles);
this.shadow.appendChild(div);
}
}
customElements.define('fancy-tabs', FancyTabs);

fancy-tabs {
float: left;
}
fancy-tabs:nth-of-type(1) {
--fancy-tabs-bg: red;
--p:20px;
--b:5px;
}
fancy-tabs:nth-of-type(2) {
--fancy-tabs-bg: orange;
--p:10px;
--b:3px;
}
fancy-tabs:nth-of-type(3) {
--fancy-tabs-bg: orange;
padding:20px; /* will get applied to host*/
border-width:5px; /* will do nothing */
}

<fancy-tabs background>text  here</fancy-tabs>
<fancy-tabs background>text  here</fancy-tabs>
<fancy-tabs background>text  here</fancy-tabs>