Chrome Extension content script don't load Custom Element via Range.insertNode

Question

I'm writing a Chrome Extension that injects my tiny app into the webpage. My small app was built with Vue as a Custom Element.

I'm bundling the app into one file called custom-elements.js, and injecting it alongside my content.js:

# manifest.json
"content_scripts": [
  {
    "matches": ["*"],
    "js": [
      "custom-elements.js",
      "content.js"
    ]
  }
],

Now, in my extension I'm using the Range API to hold a reference to a text over elements. My technique is to surround the original text with my custom element.

const originalContents = range.extractContents();

const indicator = document.createElement('overlay-indicator');
indicator.appendChild(originalContents);
range.insertNode(indicator);

This code produces an empty string. Looking inside the DevTools, I see the shadow-root is empty (so the original text is there, but it doesn't render because there is no shadow DOM there).

I know the custom element is working, because if instead of range.insertNode I'm using just appendChild it renders the custom element:

const testIndicator = indicator.cloneNode()
testIndicator.appendChild(originalContents)
const container = range.startContainer;
container.parentElement.insertBefore(testIndicator, container);

Also, I tried to create an HTML webpage with the custom-elements.js imported into it as a script, and there it is working.

In summary

It seems using Custom Element is working in Chrome Extension content script, except when using Range.insertNode.