如何解决结合 ::slotted 与伪元素
我正在尝试弄清楚将伪元素与 ::slotted
选择器结合有什么关系,看起来它适用于某些但不适用于其他选择器,而且我找不到任何列出它适用的选择器的文档与
这是问题的演示,注意一些伪选择器是如何生效的,而另一些则没有
class TestElement extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
let template = document.querySelector("template");
this.shadowRoot.append(template.content.cloneNode(true));
}
}
customElements.define("test-element",TestElement);
<template>
<style>
::slotted(*)::first-line { /* doesn't works */
color: red;
}
::slotted(*):first-letter { /* doesn't works */
color: red;
}
::slotted(*) {
max-height: 3em;
overflow: auto;
}
::slotted(*)::-webkit-scrollbar { /* doesn't works */
width: 3px;
}
::slotted(*)::-webkit-scrollbar-track { /* doesn't works */
background-color: red;
}
::slotted(*)::selection { /* doesn't works */
color: red;
}
::slotted(*)::placeholder { /* works */
color: red;
}
::slotted(*)::marker { /* works */
color: red;
}
</style>
<slot></slot>
</template>
<test-element>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
doloribus ullam fugit ipsum laborum velit architecto,provident dolore
at,aperiam quaerat officiis aliquid magni sed expedita totam dolor
doloremque odit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
doloribus ullam fugit ipsum laborum velit architecto,aperiam quaerat officiis aliquid magni sed expedita totam dolor
doloremque odit.</p>
</test-element>
<test-element>
<input placeholder="Placeholder">
</test-element>
<test-element>
<li>Li</li>
</test-element>
解决方法
在 ::placeholder
和 ::marker
上找到了好东西
但是 ::marker
在 Mozilla 的浏览器中不起作用(尚未测试 safari)
一般来说::slotted()
只需要一个简单的选择器;
见:::slotted CSS selector for nested children in shadowDOM slot
旁注:您的 constructor
可以写成:
constructor() {
let template = document.querySelector("template"); // valid code *before* super()
super() // sets and returns this scope
.attachShadow({mode: 'open'}) // sets and returns this.shadowRoot
.append(template.content.cloneNode(true));
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。