*ensure-shadow-root.js

/**
 * Usage:
 * class FancyButton extends HTMLElement {
 *   constructor() {
 *     super();
 *     ensureShadowRoot(el);
 *     // if a declarative shadow root was present, it'll be here:
 *     console.log(this.shadowRoot);
 *   }
 * }
 */
function ensureShadowRoot(el) {
  let mode, t = el.firstElementChild;
  if (mode = t && t.shadowRoot) {
    t.remove();
    el.attachShadow({mode}).append(...t.childNodes);
  }
}

attachshadow-shim.js

/**
 * Alternative version that polyfills .attachShadow() with the DSD.
 * Usage:
 * class FancyButton extends HTMLElement {
 *   constructor() {
 *     super();
 *     // if a declarative shadow root was present, it'll be here:
 *     console.log(this.shadowRoot);
 *   }
 * }
 */
var attach = HTMLElement.prototype.attachShadow;
Object.defineProperty(HTMLElement.prototype, 'attachShadow', {
  value(opts) {
    var t = this.firstElementChild;
    var mode = t && t.localName==='template' && t.getAttribute('shadowroot');
    var shadow = attach.call(this, opts);
    if (mode) {
      t.remove();
      var c;
      while (c = t.firstChild) shadow.appendChild(c);
    }
    return shadow;
  }
});