I am creating a WebComponent and passing in css ( text ) to create a CSSStyleSheet object, which is then added to the adoptedStyleSheets in the shadowRoot.

class View extends HTMLElement {
  constructor(css) {
    super();
    this.attachShadow({ mode: "open" });

    const styleSheet = new CSSStyleSheet();
    styleSheet.replaceSync(css);
    this.shadowRoot.adoptedStyleSheets.push(styleSheet);
  }
}

customElements.define("web-component", View);

This works great on laptops, but on IOS, a few things occur:

The first issue is "Type Error: Illegal Constructor" is thrown when creating a CSSStyleSheet object. This is fixed by including...

<script src=";></script>

... in the head of the document. Once this is included the "Type Error" goes away, but now none of the styles are applied to the WebComponent.

Does anyone know of any fixes / related issues for IOS devices not showing styles on WebComponents that have a CSSStyleSheet object added to the adoptedStyleSheets in the shadowRoot?