Function createShadowRootPolyfill

src/shadow-embed.js:102–151

* Shadow root polyfill. * @param {!Element} hostElement * @return {!ShadowRoot}

(hostElement)

 * @return {!ShadowRoot}
 */
function createShadowRootPolyfill(hostElement) {
  const doc = hostElement.ownerDocument;

  // Host CSS polyfill.
  hostElement.classList.add('i-amphtml-shadow-host-polyfill');
  const hostStyle = doc.createElement('style');
  hostStyle.textContent =
    '.i-amphtml-shadow-host-polyfill>:not(i-amphtml-shadow-root)' +
    '{display:none!important}';
  hostElement.appendChild(hostStyle);

  // Shadow root.
  const shadowRoot /** @type {!ShadowRoot} */ =
    // Cast to ShadowRoot even though it is an Element
    // TODO(@dvoytenko) Consider to switch to a type union instead.
    /** @type {?}  */ (doc.createElement('i-amphtml-shadow-root'));
  hostElement.appendChild(shadowRoot);
  hostElement.__AMP_SHADOW_ROOT = shadowRoot;
  Object.defineProperty(hostElement, 'shadowRoot', {
    enumerable: true,
    configurable: true,
    value: shadowRoot,
  });

  // API: https://www.w3.org/TR/shadow-dom/#the-shadowroot-interface

  shadowRoot.host = hostElement;

  // `getElementById` is resolved via `querySelector('#id')`.
  shadowRoot.getElementById = function (id) {
    const escapedId = escapeCssSelectorIdent(id);
    return /** @type {?HTMLElement} */ (
      shadowRoot./*OK*/ querySelector(`#${escapedId}`)
    );
  };

  // The styleSheets property should have a list of local styles.
  Object.defineProperty(shadowRoot, 'styleSheets', {
    get: () => {
      if (!doc.styleSheets) {
        return [];
      }
      return toArray(doc.styleSheets).filter((styleSheet) =>
        shadowRoot.contains(styleSheet.ownerNode)
      );
    },
  });

  return shadowRoot;
}

/**
 * Imports a body into a shadow root with the workaround for a polyfill case.