Function createShadowRoot

src/shadow-embed.js:37–95

(hostElement)

 * @return {!ShadowRoot}
 */
export function createShadowRoot(hostElement) {
  const win = getWin(hostElement);

  const existingRoot = hostElement.shadowRoot || hostElement.__AMP_SHADOW_ROOT;
  if (existingRoot) {
    if (self.trustedTypes && self.trustedTypes.createPolicy) {
      // Create Trusted Types policy that only returns the empty string as
      // TrustedHTML
      const policy = self.trustedTypes.createPolicy(
        'shadow-embed#createShadowRoot',
        {
          createHTML: function (unused) {
            return '';
          },
        }
      );
      existingRoot./*OK*/ innerHTML = policy.createHTML('');
    } else {
      existingRoot./*OK*/ innerHTML = '';
    }
    return existingRoot;
  }

  let shadowRoot;
  const shadowDomSupported = getShadowDomSupportedVersion();
  if (shadowDomSupported == ShadowDomVersion_Enum.V1) {
    shadowRoot = hostElement.attachShadow({mode: 'open'});
    if (!shadowRoot.styleSheets) {
      Object.defineProperty(shadowRoot, 'styleSheets', {
        get: function () {
          const items = [];
          shadowRoot.childNodes.forEach((child) => {
            if (child.tagName === 'STYLE') {
              items.push(child.sheet);
            }
          });
          return items;
        },
      });
    }
  } else if (shadowDomSupported == ShadowDomVersion_Enum.V0) {
    shadowRoot = hostElement.createShadowRoot();
  } else {
    shadowRoot = createShadowRootPolyfill(hostElement);
  }

  if (!isShadowCssSupported()) {
    const rootId = `i-amphtml-sd-${win.Math.floor(win.Math.random() * 10000)}`;
    shadowRoot['id'] = rootId;
    shadowRoot.host.classList.add(rootId);

    // CSS isolation.
    installCssTransformer(shadowRoot, (css) => {
      return transformShadowCss(shadowRoot, css);
    });
  }

  return shadowRoot;