阴影元素的全局 CSS 效果。为什么？

Question

CSS（一个在光照 dom 一个在阴影 dom）对标签的影响。
Name 和 Phone 也受 global 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>

Answer 1

这是 CSS 样式的正常行为。插入阴影 DOM 和 <content> 的元素（在您的示例中：<span class=name>...</span>）实际上是普通 DOM 的一部分，因此受到全局 [=48] 的影响=] 样式。

如果你不想要它，你应该尝试另一种技术，比如将光 DOM 元素复制到阴影 DOM 而不是使用 <content>.

此外，您应该使用 Custom Elements v1 (and customElements.define()) and Shadow DOM v1 (and <slot>) 而不是已弃用的自定义元素 v0 (registerElement()) 和阴影 DOM v0 (<content>)。

使用 Shadow DOM v1，您可以在 Shadow DOM 到 select 中使用 ::slotted() 并设置插入元素的样式。

然后您可以使用 !important 修饰符重载 Shadow DOM <style> 中的 CSS 规则：

第 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>

阴影元素的全局 CSS 效果。为什么？

Global CSS effect on Shadow element. Why?

web-component

shadow-dom

custom-element

google-web-component

native-web-component