::slotted（） 伪元素表示具有 slot 属性的元素。与 ::part（） 伪元素不同， ::slotted（） 伪元素仍然封装在 Web 组件的 <template> 的 <style> 元素中。
此伪元素仅在放置在影子 DOM 中的 CSS 中使用时有效。
语法
selector::slotted(<compound-selector>) {
/* ... */
}
CSS ::slotted 示例
下面是一个 ::slotted（） 伪元素的例子。在此示例中：
- 正在使用具有三个插槽的模板。
- 定义了自定义元素 'sample-card'。
- CSS 样式已添加到 <<template> 的 style> 块中。
- 首先声明插槽，使用 class name 或 id。
- 声明的插槽稍后在 html 代码中使用类名或 id 调用。
- 如果类名或 id 标识符与声明的不匹配，则呈现插槽的描述。
尝试更改类名或 id 或样式，并查看更改后的效果。
<html>
<head>
</head>
<body>
<template id="sample-template">
<style>
::slotted(.p-text) {
background-color: lavender;
}
h2::slotted(.heading) {
background: silver;
}
::slotted(#footer-text) {
background-color: lightsteelblue;
border: 2px solid black;
}
</style>
<div>
<h2><slot name="heading">title goes here</slot></h2>
<slot name="p-text">content goes here</slot>
<slot name="footer-text">Footer here</slot>
</div>
</template>
<sample-card>
<span class="heading" slot="heading">::Slotted Example</span>
<p class="p-text" slot="p-text">Paragraph text</p>
<p id="footer-text" slot="footer-text">Footer text</p>
</sample-card>
<script>
customElements.define(
'sample-card',
class extends HTMLElement {
constructor() {
super();
const template = document.getElementById('sample-template');
const shadow = this.attachShadow({ mode: 'open' });
shadow.appendChild(template.content.cloneNode(true));
const elementStyle = document.createElement('style');
elementStyle.textContent = `
div {
width: 250px;
border: 5px inset green;
border-radius: 2px;
padding: 5px;
}`;
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;
});
}
},
);
</script>
</body>
</html>
