3

这是显示行为的 jsfiddle。

我希望能够将option元素拉入 Shadow DOM 中的插入点，但由于 DOMselect是空的，我认为不会发生这种情况。无论如何，Chrome 检查器对插入点并不是很有帮助，但我已经验证了我的浏览器在执行其他插入点操作时可以正常工作，例如除了将option元素插入到select.

我定义了一个自定义元素，如下所示：

var CatpantsProto = Object.create(HTMLElement.prototype);

CatpantsProto.createdCallback = function(e) {
  var shadow = this.createShadowRoot();
  var t = document.getElementById('guy');
  var clone = document.importNode(t.content, true);
  shadow.appendChild(clone);
};

document.registerElement('cat-pants', {
  prototype: CatpantsProto
});

这是#guy模板：

<template id="guy">
  <span>Before</span>
  <select>
    <content></content>
  </select>
  <span>After</span>
</template>

这是用法：

<cat-pants>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</cat-pants>

同样，我希望将这些option元素插入到selectShadow DOM 中，但是当我打开下拉列表时它们不会出现。

我认为也许“派生”HTMLElement是问题所在，但如果我实现它也行不通HTMLSelectElement。

我还尝试过不使用模板并直接修改shadow' innerHTML，但这也不起作用。

我目前的想法是元素在s、s 或soption之外无效，并且浏览器正在抛出某种适合但没有告诉我的情况。selectdatalistoptgroup

我很茫然，可能会通过创建第二个item元素占位符来解决这个问题，该占位符将转换为option我的createdCallback. 啊。

4

1 回答 1

3

无法使用该类型的元素创建 Shadow Root，因为浏览器本身会创建自己的（用户代理）shadow DOM 来显示选择控件。

如果是这样，您将收到以下错误：

无法在“元素”上执行“createShadowRoot”：为此元素禁用了作者创建的影子根。

相反，您应该扩展<select>元素本身，或<option>s 使用 Javascript 直接复制（而不是通过<content>方式）。

于 2016-01-08T15:15:31.123 回答