我正在学习web components,但不使用任何第三方库,如Polymer。 其中一个主要卖点是Web组件样式与其他地方定义的样式分离,允许在沙盒环境中为组件的影子DOM设置样式。
我遇到的问题是样式如何通过插槽元素级联。由于插槽元素不是影子DOM的一部分,因此它们只能在组件模板内使用
这个问题可以简化为:
我很难理解这个“特性”的价值。我要么必须以其他格式指定我的链接并使用JS创建它们的节点,要么在我的颜色属性中添加!important——但这仍然不能保证我没有定义的任何其他属性的一致性。
这个问题已经得到解决了吗?或者通过更改我的轻量DOM结构来轻松解决?我不确定如何将链接列表放入插槽中。
我遇到的问题是样式如何通过插槽元素级联。由于插槽元素不是影子DOM的一部分,因此它们只能在组件模板内使用
::slotted()
选择器进行定位。这很好,但几乎无法保证Web组件将在所有上下文中正确显示,因为外部定义的样式也会具有不可战胜的特异性,并应用于插槽元素。
*除了!important
。这个问题可以简化为:
customElements.define("my-nav",
class extends HTMLElement {
constructor() {
super();
const template = document.querySelector("template#my-nav").content;
this.attachShadow({ mode: "open" })
.appendChild(template.cloneNode(true));
}
}
);
a {
color: red; /* >:( */
}
<template id="my-nav">
<style>
.links-container ::slotted(a) {
color: lime;
font-weight: bold;
margin-right: 20px;
}
</style>
<div class="links-container">
<slot name="links"></slot>
</div>
</template>
<p>I want these links to be green:</p>
<my-nav>
<a href="#" slot="links">Link 1</a>
<a href="#" slot="links">Link 2</a>
<a href="#" slot="links">Link 3</a>
</my-nav>
这个问题已经得到解决了吗?或者通过更改我的轻量DOM结构来轻松解决?我不确定如何将链接列表放入插槽中。
<slot>
使用一些不该用的东西。非常感谢! - Scott