描述
CSS 中的伪元素 ::part（）用于表示影子树中具有相同 part 属性的元素;即伪元素 ::part（） 就像一个函数，并将该部分作为参数。
part 属性是一个全局属性，它表示元素的 part name 的空格分隔列表。这些部分名称允许使用伪元素 ::part（）选择和设置阴影树的特定元素的样式。
语法
selector::part(+) {
/* ... */
}
CSS ::part（） 示例
这是一个伪元素 ::part（）的例子。在此示例中：
- 使用 JavaScript （new-widget） 创建模板。
- 将模板的一部分声明为 widget。
- 将 'widget' 作为参数传递给伪元素 ::part（），其中指定了 CSS 样式。
- 由于部件（小组件）包含 <p> 标签，因此 CSS 样式将应用于此 <p> 标签。
<html>
<head>
<style>
.container {
max-width: 500px;
margin: 0 auto;
padding: 2em;
}
body {
font: 1em/1.618 Segoe UI, sans-serif;
}
new-widget::part(widget) {
max-width: 300px;
padding: 1em;
background-color: lightgoldenrodyellow;
border-radius: 20%;
}
</style>
</head>
<body>
<div class="container">
<p>This paragraph is rendered as normal without any style.</p>
<template id="new-widget">
<div part="widget">
<p>This paragraph is rendered as a part of the main paragraph and thus the ::part() pseudo-element is applied here.</p>
</div>
</template>
<new-widget></new-widget>
<script>
let template = document.querySelector("#new-widget");
globalThis.customElements.define(
template.id,
class extends HTMLElement {
constructor() {
super()
.attachShadow({ mode: "open" })
.append(template.content);
}
}
);
</script>
</div>
</body>
</html>
