Problems using a SELECT tag in a custom element with a CONTENT tag

Question

Here's the jsfiddle showing the behavior .

I expected to be able to pull in the option elements into the insertion point in the Shadow DOM but, as the select is empty, I don't think that's happening. The Chrome inspector isn't super helpful with insertion points anyway but I've verified that my browser works when doing other insertion point stuff, eg anything other than inserting option elements into a select .

I define a custom element like so:

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
});

Here is the #guy template:

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

Here is the usage:

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

Again, I expected those option elements to be inserted into the select in the Shadow DOM but they don't show up when I open the dropdown.

I thought maybe "deriving" from HTMLElement was the problem, but it doesn't work if I implement HTMLSelectElement either.

I also experimented with not using a template and modifying the shadow 's innerHTML directly but that didn't work either.

My current thinking is that option elements just aren't valid outside of select s, datalist s, or optgroup s and the browser is throwing some kind of fit but not telling me about it.

I'm at a loss and will probably work around this by creating a second item element placeholder that gets transformed into option elements in my createdCallback . Argh.

Answer 1

It is not possible to create a Shadow Root with that type of element, because the browser itself creates its own (user-agent) shadow DOM to display a select control.

If so you'll get the following error:

Failed to execute 'createShadowRoot' on 'Element': Author-created shadow roots are disabled for this element.

Instead you should extend the <select> element itself, or copy the <option>s directy with Javascript (not via the <content> way).