CSS::slotted选择器选择<slot>元素的子元素。
但是,当尝试选择像 with ::slotted(*), ::slotted(*) *, or那样的孙子时,选择::slotted(* *)器似乎没有生效。
class MyElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'})
shadowRoot.innerHTML = `
<style>
::slotted(*) {
display: block;
border: solid blue 1px;
padding: 3px;
}
::slotted(*) span {
display: block;
border: solid red 1px;
padding: 3px;
}
::slotted(* span) {
display: block;
border: solid green 1px;
padding: 3px;
}
</style>
<slot></slot>
`;
}
}
customElements.define('my-element', MyElement);Run Code Online (Sandbox Code Playgroud)
<my-element>
<p>
<span>Test</span>
</p>
</my-element> …Run Code Online (Sandbox Code Playgroud)