给 Shadow DOM 添加样式
shadow DOM 可以包含 <style> 和 <link rel="stylesheet" href="…"> 标签。在后一种情况下，样式表是 HTTP 缓存的，因此不会为使用同一模板的多个组件重新下载样式表。
一般来说，局部样式只在 shadow 树内起作用，文档样式在 shadow 树外起作用。但也有少数例外。
:host
:host 选择器允许选择 shadow 宿主（包含 shadow 树的元素）。
例如，我们正在创建 <custom-dialog> 元素，并且想使它居中。为此，我们需要对 <custom-dialog> 元素本身设置样式。
这正是 :host 所能做的：
<template id="tmpl">
<style>
/* 这些样式将从内部应用到 custom-dialog 元素上 */
:host {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-block;
border: 1px solid red;
padding: 10px;
}
</style>
<slot></slot>
</template>
<script>
customElements.define('custom-dialog', class extends HTMLElement {
connectedCallback() {
this.attachShadow({mode: 'open'}).append(tmpl.content.cloneNode(true));
}
});
</script>
<custom-dialog>
Hello!
</custom-dialog>级联
shadow 宿主（ <custom-dialog> 本身）驻留在 light DOM 中，因此它受到文档 CSS 规则的影响。
如果在局部的 :host 和文档中都给一个属性设置样式，那么文档样式优先。
例如，如果在文档中我们有如下样式：
<style>
custom-dialog {
padding: 0;
}
</style>……那么 <custom-dialog> 将没有 padding。
这是非常有利的，因为我们可以在其 :host 规则中设置 “默认” 组件样式，然后在文档中轻松地覆盖它们。
唯一的例外是当局部属性被标记 !important 时，对于这样的属性，局部样式优先。
:host(selector)
与 :host 相同，但仅在 shadow 宿主与 selector 匹配时才应用样式。
例如，我们希望仅当 <custom-dialog> 具有 centered 属性时才将其居中:
<template id="tmpl">
<style>
:host([centered]) {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-color: blue;
}
:host {
display: inline-block;
border: 1px solid red;
padding: 10px;
}
</style>
<slot></slot>
</template>
<script>
customElements.define('custom-dialog', class extends HTMLElement {
connectedCallback() {
this.attachShadow({mode: 'open'}).append(tmpl.content.cloneNode(true));
}
});
</script>
<custom-dialog centered>
Centered!
</custom-dialog>
<custom-dialog>
Not centered.
</custom-dialog>现在附加的居中样式只应用于第一个对话框：<custom-dialog centered>。
:host-context(selector)
与 :host 相同，但仅当外部文档中的 shadow 宿主或它的任何祖先节点与 selector 匹配时才应用样式。
例如，:host-context(.dark-theme) 只有在 <custom-dialog> 或者 <custom-dialog> 的任何祖先节点上有 dark-theme 类时才匹配：
<body class="dark-theme">
<!--
:host-context(.dark-theme) 只应用于 .dark-theme 内部的 custom-dialog
-->
<custom-dialog>...</custom-dialog>
</body>总之，我们可以使用 :host-family 系列的选择器来对组件的主元素进行样式设置，具体取决于上下文。这些样式（除 !important 外）可以被文档样式覆盖。
给占槽（ slotted ）内容添加样式
现在让我们考虑有插槽的情况。
占槽元素来自 light DOM，所以它们使用文档样式。局部样式不会影响占槽内容。
在下面的例子中，按照文档样式，占槽的 <span> 是粗体，但是它不从局部样式中获取 background：
<style>
span { font-weight: bold }
</style>
<user-card>
<div slot="username"><span>John Smith</span></div>
</user-card>
<script>
customElements.define('user-card', class extends HTMLElement {
connectedCallback() {
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `
<style>
span { background: red; }
</style>
Name: <slot name="username"></slot>
`;
}
});
</script>结果是粗体，但不是红色。
如果我们想要在我们的组件中设置占槽元素的样式，有两种选择。
首先，我们可以对 <slot> 本身进行样式化，并借助 CSS 继承：
<user-card>
<div slot="username"><span>John Smith</span></div>
</user-card>
<script>
customElements.define('user-card', class extends HTMLElement {
connectedCallback() {
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `
<style>
slot[name="username"] { font-weight: bold; }
</style>
Name: <slot name="username"></slot>
`;
}
});
</script>这里 <p>John Smith</p> 变成粗体，因为 CSS 继承在 <slot> 和它的内容之间有效。但是在 CSS 中，并不是所有的属性都是继承的。
另一个选项是使用 ::slotted(selector) 伪类。它根据两个条件来匹配元素：
- 这是一个占槽元素，来自于 light DOM。插槽名并不重要，任何占槽元素都可以，但只能是元素本身，而不是它的子元素 。
- 该元素与
selector匹配。
在我们的例子中，::slotted(div) 正好选择了 <div slot="username"> ，但是没有选择它的子元素：
<user-card>
<div slot="username">
<div>John Smith</div>
</div>
</user-card>
<script>
customElements.define('user-card', class extends HTMLElement {
connectedCallback() {
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `
<style>
::slotted(div) { border: 1px solid red; }
</style>
Name: <slot name="username"></slot>
`;
}
});
</script>请注意，::slotted 选择器不能用于任何插槽中更深层的内容。下面这些选择器是无效的：
::slotted(div span) {
/* 我们插入的 <div> 不会匹配这个选择器 */
}
::slotted(div) p {
/* 不能进入 light DOM 中选择元素 */
}此外，::sloated 只能在 CSS 中使用，不能在 querySelector 中使用。
用自定义 CSS 属性作为勾子
如何在主文档中设置组件的内建元素的样式?
像 :host 这样的选择器应用规则到 <custom-dialog> 元素或 <user-card>，但是如何设置在它们内部的 shadow DOM 元素的样式呢？
没有选择器可以从文档中直接影响 shadow DOM 样式。但是，正如我们暴露用来与组件交互的方法那样，我们也可以暴露 CSS 变量（自定义 CSS 属性）来对其进行样式设置。
自定义 CSS 属性存在于所有层次，包括 light DOM 和 shadow DOM。
例如，在 shadow DOM 中，我们可以使用 --user-card-field-color CSS 变量来设置字段的样式，而外部文档可以设置它的值：
<style>
.field {
color: var(--user-card-field-color, black);
/* 如果 --user-card-field-color 没有被声明过，则取值为 black */
}
</style>
<div class="field">Name: <slot name="username"></slot></div>
<div class="field">Birthday: <slot name="birthday"></slot></div>
</style>然后，我们可以在外部文档中为 <user-card> 声明此属性：
user-card {
--user-card-field-color: green;
}自定义 CSS 属性穿透 shadow DOM，它们在任何地方都可见，因此内部的 .field 规则将使用它。
以下是完整的示例：
<style>
user-card {
--user-card-field-color: green;
}
</style>
<template id="tmpl">
<style>
.field {
color: var(--user-card-field-color, black);
}
</style>
<div class="field">Name: <slot name="username"></slot></div>
<div class="field">Birthday: <slot name="birthday"></slot></div>
</template>
<script>
customElements.define('user-card', class extends HTMLElement {
connectedCallback() {
this.attachShadow({mode: 'open'});
this.shadowRoot.append(document.getElementById('tmpl').content.cloneNode(true));
}
});
</script>
<user-card>
<span slot="username">John Smith</span>
<span slot="birthday">01.01.2001</span>
</user-card>小结
shadow DOM 可以引入样式，如 <style> 或 <link rel="stylesheet">。
局部样式可以影响：
- shadow 树,
- shadow 宿主（通过
:host-family 系列伪类）， - 占槽元素（来自 light DOM），
::slotted(selector)允许选择占槽元素本身，但不能选择它们的子元素。
文档样式可以影响：
- shadow 宿主（因为它位于外部文档中）
- 占槽元素及占槽元素的内容（因为它们同样位于外部文档中）
当 CSS 属性冲突时，通常文档样式具有优先级，除非属性被标记为 !important，那么局部样式优先。
CSS 自定义属性穿透 shadow DOM。它们被用作 “勾子” 来设计组件的样式：
- 组件使用自定义 CSS 属性对关键元素进行样式设置，比如
var(--component-name-title, <default value>)。 - 组件作者为开发人员发布这些属性，它们和其他公共的组件方法一样重要。
- 当开发人员想要对一个标题进行样式设计时，他们会为 shadow 宿主或宿主上层的元素赋值
--component-name-titleCSS 属性。 - 奥力给！