两种 CSS(一种在 light dom 中,一种在 shadown dom 中)对标签的影响。
Name 和 Phone 也受全局 CSS at 和 Shadow Scope CSS 影响!!!
为什么 ?????我不要它。
我预计它们只是受到模板范围内的 Sahdow 范围 CSS 的影响。
我希望我能从你那里得到一些想法。
https://plnkr.co/edit/Asr1S1UFvhmhtZeWm5k8
//CREATE CUSTOM ELEMENT
var MyContactProtype = Object.create(HTMLElement.prototype);
MyContactProtype.createdCallback = function() {
//retrieve template
var tpl = document.querySelector('#contact-form-tpl');
var tpl_ct = document.importNode(tpl.content, true);
//this <=> my-contact element -> create shadow
var shadowRoot = this.createShadowRoot();
//show template in shadow DOM
shadowRoot.appendChild(tpl_ct);
};
//REGISTER CUSTOM ELEMENT
document.registerElement("my-contact", {
prototype: MyContactProtype
});
span {/* global CSS*/
text-decoration: line-through
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.11.0/document-register-element.js"></script>
<span>HELLO</span>
<!--line through by css at LINE 6: OK-->
<my-contact>
<h1 class="header-contact-form">Contact X</h1>
<span class="name">this is my name</span>
<span class="phone">this is my phone</span>
</my-contact>
<template id="contact-form-tpl">
<style>
span {/* shadow scope CSS*/
text-decoration: underline
}
</style>
<fieldset>
<legend>
<content select="h1.header-contact-form"></content>
<!--
Name and Phone are effected by CSS at line 6 and 21 too!!!
WHY ????? I dont want it.
I expected they are just effeted by CSS line 21 which is in template scope.
-->
<div>
Name: <span><content select="span.name"></content></span>
</div>
<div>
Phone: <content select="span.phone"><span></span></content>
</div>
<span>TEST</span><!-- only apply css at line 21: OK-->
</legend>
</fieldset>
</template>
最佳答案
这是 CSS 样式的正常行为。使用 <content>
插入到 Shadow DOM 中的元素(在您的示例中:<span class=name>...</span>
)实际上是普通 DOM 的一部分,因此受到全局 CSS 样式的影响。
如果你不想要它,你应该尝试另一种技术,比如将 light DOM 元素复制到 Shadow DOM 而不是使用 <content>
.
此外,您应该使用 Custom Elements v1 (和 customElements.define()
)和 Shadow DOM v1 (和 <slot>
)而不是已弃用的自定义元素 v0 ( registerElement()
) 和 Shadow DOM v0 ( <content>
)。
使用 Shadow DOM v1,您可以使用 ::slotted()
在 Shadow DOM 中选择和设置插入元素的样式。
然后您可以在 Shadow DOM 中重载 CSS 规则 <style>
与 !important
修饰符:
第 21 行:
<style>
::slotted( span ) {
text-decoration: underline!important
}
</style>
下面是完整的片段:
//CREATE CUSTOM ELEMENT
class MyContact extends HTMLElement {
constructor() {
super()
//retrieve template
var tpl = document.querySelector('#contact-form-tpl');
var tpl_ct = document.importNode(tpl.content, true);
//this <=> my-contact element -> create shadow
var shadowRoot = this.attachShadow( {mode:'open'}) //createShadowRoot();
//show template in shadow DOM
shadowRoot.appendChild(tpl_ct);
}
}
//REGISTER CUSTOM ELEMENT
customElements.define("my-contact", MyContact);
span {
text-decoration: line-through
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.11.0/document-register-element.js"></script>
<span>HELLO</span>
<!--line through by css at LINE 6: OK-->
<my-contact>
<h1 slot=header>Contact X</h1>
<span slot=name>this is my name</span>
<span slot=phone>this is my phone</span>
</my-contact>
<template id="contact-form-tpl">
<style>
span ::slotted( span ),
span {
text-decoration:underline!important
}
</style>
<fieldset>
<legend>
<slot name=header></slot>
<div>
Name: <span><slot name="name"></slot></span>
</div>
<div>
Phone: <slot name="phone"><span></span></slot>
</div>
<span>TEST</span><!-- only apply css at line 21: OK-->
</legend>
</fieldset>
</template>
关于web-component - Shadow 元素的全局 CSS 效果。为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51354449/