::slotted()

基线 广泛可用

此功能已得到很好的建立，并且可以在许多设备和浏览器版本中使用。它自以下浏览器版本起已在各浏览器中可用： 2020 年 1 月.

::slotted() CSS 伪元素 表示已放置到 HTML 模板中插槽内的任何元素（有关更多信息，请参阅 使用模板和插槽）。

这仅在用于放置在 Shadow DOM 中的 CSS 内部时有效。请注意，此选择器不会选择放置到插槽中的文本节点；它仅针对实际的元素。

试一试

css
/* Selects any element placed inside a slot */
::slotted(*) {
  font-weight: bold;
}

/* Selects any <span> placed inside a slot */
::slotted(span) {
  font-weight: bold;
}

语法

css
::slotted(<compound-selector>) {
  /* ... */
}

示例

突出显示已插入的元素

在此示例中，我们使用带三个插槽的模板

html
<template id="person-template">
  <div>
    <h2>Personal ID Card</h2>
    <slot name="person-name">NAME MISSING</slot>
    <ul>
      <li><slot name="person-age">AGE MISSING</slot></li>
      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
    </ul>
  </div>
</template>

我们定义了 <person-details> 自定义元素。在这种情况下，我们使用 JavaScript 添加样式，尽管我们也可以在 <template> 内的 <style> 块中添加样式，效果相同。

js
customElements.define(
  "person-details",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("person-template");
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({ mode: "open" });

      let style = document.createElement("style");
      style.textContent =
        "div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }" +
        "h2 { margin: 0 0 10px; }" +
        "ul { margin: 0; }" +
        "p { margin: 10px 0; }" +
        "::slotted(*) { color: gray; font-family: sans-serif; } " +
        "::slotted(span) {text-decoration: underline;} ";

      shadowRoot.appendChild(style);
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  },
);

当用内容填充 style 元素时，您会看到我们选择所有已插入的元素 (::slotted(*)) 并为其提供不同的字体和颜色。这将它们与未填充的插槽区分开来。我们为所有已插入的 <span> (::slotted(span)) 设置了样式，以将 <span> 与 <p> 区分开来。

我们的标记包含三个自定义元素，包括一个自定义元素，其中在源顺序中包含一个无效的插槽名称，该名称与 <template> 不同。

html
<person-details>
  <p slot="person-name">Wonder Woman</p>
  <span slot="person-age">Immortal</span>
  <span slot="person-occupation">Superhero</span>
</person-details>

<person-details>
  <p slot="person-name">Malala Yousafzai</p>
  <span slot="person-age">17</span>
  <span slot="person-occupation">Activist</span>
</person-details>

<person-details>
  <span slot="person-age">44</span>
  <span slot="not-a-slot-name">Time traveller</span>
  <p slot="person-name">Dr. Who</p>
</person-details>

结果

规范

规范
CSS 作用域模块级别 1
# slotted-pseudo

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅