window.customElements.define 为 null - 无法创建 Shadow DOM（在 Chrome 扩展中）

Question

我正在学习教程：https : //alligator.io/web-components/composing-slots-named-slots/

我正在遵循以下建议：如何通过 Chrome 扩展程序附加 HTML 标记而不会将主机页面的样式泄漏到附加元素？

由于某种原因得到一个错误：

window.customElements.define('my-info-box', MyInfoBox);

myScript.js:82 Uncaught TypeError: Cannot read property 'define' of null

根据我是否设置断点，它的行为会有所不同：https : //en.wikipedia.org/wiki/Heisenbug

你碰巧知道吗？

我认为这可能是时间问题，所以尝试setTimeout以及document.addEventListener('DOMContentLoaded', fireContentLoadedEvent);在回调中做魔术......

---

---

---

视频讲解：https : //youtu.be/hpvRIlBtkEE

扩展代码

  let shadowDomMarkup = 
  `
    <my-info-box>
      <span slot="top">I'm in the shadow DOM injected by extension</span>
    </my-info-box>
  `;

  $(shadowDomMarkup).prependTo("body");

  (function() {
    const template = document.createElement('template');

    template.innerHTML = `
      <style>
        :host {
          display: block;
          background: red;
          border: 10px dashed black;
        }
      </style>

      <div>
        <slot name="top"></slot>
      </div>
    `;

    class MyInfoBox extends HTMLElement {
      constructor() {
        super();

        this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(template.content.cloneNode(true));
      }
    }

    window.customElements.define('my-info-box', MyInfoBox);

  })();

凌乱的清单（大量实验）：

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2,
  "permissions": ["activeTab", "declarativeContent", "storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },

  "options_page": "options.html",
  "page_action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["zepto.min.js", "angular.js", "angular-route.js", "myScript.js"],
      "css": ["styles.css"],
      "run_at": "document_start"
    }
  ],
  "web_accessible_resources": [
    "iframed.html"
  ],
  "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}