javascript - Web 组件 : slot appears outside shadow DOM

Question

我想从 <select> 制作一个网络组件元素。我正在尝试获取 <option>用户提供的标记出现在 Shadow DOM 中。

我的组件:

let tmpl = document.createElement('template');
tmpl.innerHTML = `
<select placeholder="text">
    <slot name="option"></slot>
</select>
`;

class SelectBox extends HTMLElement {
  constructor() {
    super();
    if (!this.shadowRoot) {
      this.root = this.attachShadow({mode: 'open'});
      this.root.appendChild(tmpl.content.cloneNode(true));
    }
  }
}
customElements.define('select-box', SelectBox);

HTML:

<select-box>
  <option slot="option" value="text">text</option>
</select-box>

呈现的是一个空的选择框。我可以在控制台中看到该元素为空

这让我相信我还没有掌握将用户元素插入影子 DOM 的过程。

Answer 1

看起来问题是 option 元素无法分配为插槽。

但是，由于您的模板只是一个选择，我想知道您为什么不简单地扩展一个选择并收工。

class SelectBox extends HTMLSelectElement {
  connectedCallback() {
    // in case is not fully parsed yet ...
    if (this.selectedIndex < 0)
      return setTimeout(() => this.connectedCallback());
    this.addEventListener('change', this);
    this.parentNode.insertBefore(
      document.createElement('p'),
      this.nextSibling
    );
    this.handleEvent();
  }
  handleEvent() {
    this.nextSibling.textContent =
      `${this.selectedIndex}: ${this.value}`;
  }
}

customElements.define('select-box', SelectBox, {extends: 'select'});

对于上面的类，你所需要的只是带有你的选项的 DOM，你将选项放在这些无论如何都不属于的地方，只需完全内置扩展即可。

<select is="select-box">
  <option value="first">first</option>
  <option value="second">second</option>
</select>

您可以看到它正在运行 live in this code pen .

不到1k的polyfill，剩下的是described in this medium post .

我知道这并没有完全解决您的问题，但除非您希望等待所有浏览器修复该问题，否则至少您知道有一种标准/更好的方法来扩展内置函数。