不渲染阴影的自定义元素

Question

我试图创建一个带有阴影的自定义元素，但是当我添加一个阴影时，该元素的内容不会呈现。下面是我的代码：

JavaScript：

class CustomElement extends HTMLElement {
 constructor (){
  super();
  var shadow = this.attachShadow({mode: 'open'});
  var content = document.createElement("DIV");
  content.innerText = "hello world";
  shadow.appendChild(content);
 }
}
customElements.define("custom-element", CustomElement);

HTML：

<custom-element>blah blah blah</custom-element>

但它所呈现的只是文本"hello world“

Answer 1

这是阴影DOM的正常行为:阴影DOM内容屏蔽了原始内容(称为Light DOM)。

如果要显示Light DOM内容，请使用阴影DOM中的。

​

class CustomElement extends HTMLElement {
 constructor (){
  super();
  var shadow = this.attachShadow({mode: 'open'});
  var content = document.createElement("DIV");
  content.innerHTML = "hello world: <br> <slot></slot>";
  shadow.appendChild(content);
 }
}
customElements.define("custom-element", CustomElement);

<custom-element>blah blah blah</custom-element>

​