title: Extending <option>
body: <p>I'm trying to extend the <code>HTMLOptionElement</code>,</p>
  
  <pre><code>&lt;template id="cOptionTemplate"&gt;
      &lt;content&gt;&lt;/content&gt;
  &lt;/template&gt;
  
  &lt;select&gt;
      &lt;option is="custom-option"&gt;Test&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  
  
  <pre><code>var cOption = document.registerElement('custom-option', {
      prototype: Object.create(HTMLOptionElement.prototype, {
          createdCallback: {
              value: function() {
                  var template = document.getElementById("cOptionTemplate")
                  var clone = document.importNode(template.content, true);
                  this.createShadowRoot().appendChild(clone);
              }
          },
          attributeChangedCallback: {
              value: function (attrName, oldVal, newVal){
                  switch(attrName){
                      case "attr1":
                          console.log(this);
                  }
              }
          }
      }),
      extends: "option"
  });
  </code></pre>
  
  <p>Here's <a href="https://jsfiddle.net/DerekL/78a0pbsm/" rel="nofollow">a demo</a> of the code.</p>
  
  <p>but apparently that doesn't work because it already has a user agent shadowRoot?</p>
  
  <blockquote>
    <p>Uncaught InvalidStateError: Failed to execute 'createShadowRoot' on 'Element': Shadow root cannot be created on a host which already hosts an user-agent shadow tree.</p>
  </blockquote>
  
  <p>I have never seen this error and I thought it lets you attach multiple shadow roots. Why is it happening and is there a way to make it work?</p>