::slotted()

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流浏览器均已支持。

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

这仅在使用影子 DOM 中的 CSS 时才有效。请注意，此选择器不会选择放置在插槽中的文本节点；它只针对实际元素。

试一试

/* This CSS is being applied inside the shadow DOM. */

::slotted(.content) {
  background-color: aqua;
}

h2 ::slotted(span) {
  background: silver;
}

<template id="card-template">
  <div>
    <h2><slot name="caption">title goes here</slot></h2>
    <slot name="content">content goes here</slot>
  </div>
</template>

<my-card>
  <span slot="caption">Error</span>
  <p class="content" slot="content">Build failed!</p>
</my-card>

customElements.define(
  "my-card",
  class extends HTMLElement {
    constructor() {
      super();

      const template = document.getElementById("card-template");
      const shadow = this.attachShadow({ mode: "open" });
      shadow.appendChild(template.content.cloneNode(true));

      const elementStyle = document.createElement("style");
      elementStyle.textContent = `
        div {
          width: 200px;
          border: 2px dotted red;
          border-radius: 4px;
        }`;
      shadow.appendChild(elementStyle);

      const cssTab = document.querySelector("#css-output");
      const editorStyle = document.createElement("style");
      editorStyle.textContent = cssTab.textContent;
      shadow.appendChild(editorStyle);
      cssTab.addEventListener("change", () => {
        editorStyle.textContent = cssTab.textContent;
      });
    }
  },
);

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> 块添加它们，效果相同

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 traveler</span>
  <p slot="person-name">Dr. Who</p>
</person-details>

结果

规范

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面由MDN 贡献者于 2025 年 7 月 14 日最后修改。

在 GitHub 上查看此页面 • 报告此内容存在的问题