window.customElements.define is null - cannot create Shadow DOM (in Chrome Extension)

Question

I'm following the tutorial: https://alligator.io/web-components/composing-slots-named-slots/

I'm following the advice: How to append a HTML markup via Chrome Extension without leaking styles of the host page to the appended element?

For some reason getting an error:

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

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

Depending on whether I set breakpoint or not it behaves differently: https://en.wikipedia.org/wiki/Heisenbug

Do you happen to know?

I thought it could be timing issues so tried setTimeout as well as document.addEventListener('DOMContentLoaded', fireContentLoadedEvent); and doing the magic in the callback...

---

---

---

Video explanation: https://youtu.be/hpvRIlBtkEE

Extension code

  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);

  })();

Messy manifest (a lot of experimentation):

{
  "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'"
}