与<slot>

Question

我正在努力学习更多关于如何使用 customElements 的知识，并期待与它一起使用。当我尝试与另一个元素一起使用并包围它时，DOM 看起来不像预期的那样，shadowRoot 没有获取 ?

的内容

我很想知道我做错了什么以及这里发生了什么？希望这个问题有意义！

致以诚挚的问候

自定义元素

customElements.define(
  'test-element',
  class extends HTMLElement {
    constructor() {
      super();
      this.shadow = this.attachShadow( {mode: 'open'} );
    }
            
    connectedCallback() {
      this.shadow.appendChild(this._template().cloneNode(true));      
    }

    _template() {
      let template = document.createElement('template');
      template.innerHTML = `
      <div class="surrounding-element">
        <slot name="content"></slot>
      </div>
      `;
      return template.content;
    }
  }
)

在渲染的 DOM 中

<test-element>
  #shadow-root                  
    <div class="surrounding-element">           
      <slot name="content"></slot>      
    </div>              
  <div slot="content" class="non-template">
    <p>Some kind of content!</p>
  </div>
</test-element>

我一直在尝试一起使用 , 和 customElements 来更好地控制内容的放置位置，我希望能够包装提供给 .

的内容