如果没有` 而是影子根，子节点会发生什么？>

Question

考虑此代码：

//js
class FooBar extends HTMLElement {
  constructor(){
    super();
  }
}

customElements.define('foo-bar', FooBar);


<!-- html -->
<foo-bar>
  <h1>Test</h1>
</foo-bar>
这将在浏览器中显示»Test«。

如果构造函数更改为：

constructor () {
  super();
  this.shadow = this.attachShadow({ mode: 'open' }) 
}
»测试«消失了，因为现在有了影子根。

如果进一步将构造方法更改为

constructor () {
  super();
  this.shadow = this.attachShadow({ mode: 'open' });
  this.shadow.appendChild(document.createElement('slot')); 
}
»Test«再次出现，因为现在<foo-bar>的所有子节点都有一个默认的插槽>
但是，如果影子根中没有<slot />，子节点会发生什么。它们仍然出现在this.children中，并且其style.display属性保持为""。所以它们在dom之内，却未被渲染，即使您讲相反的话？这里到底发生了什么？

考虑此代码：// js类FooBar扩展了HTMLElement {Constructor（）{super（）; }} customElements.define（'foo-bar'，FooBar）;

Test

Answer 1

<foo-bar>
  <h1>Test</h1>
</foo-bar>
H1是lightDOM