Capacitor doesn't support Shadow DOM? 😭

Capacitor
1

hi.
I ran my code on android studio and nothing appeared on the screen(everything works in the browser).
Without shadow DOM, web components are displayed.

<body>
    <chat-page></chat-page>
</body>

    <script type="module">

      import css from "./sheet.css" with { type: 'css' }; //  #chat { width: 300px; height: 300px;border: red thin solid; }

      customElements.define(`chat-page`, class extends HTMLElement {
        constructor() {
          super();
          this.attachShadow({mode:"open"});
          this.shadowRoot.adoptedStyleSheets = [css];
          this.shadowRoot.innerHTML="<div id='chat'></div>";
        }
}
</script>
2

Shadow DOM is definitely supported as Ionic uses it. Try looking at DevTools to see if there are any errors. You can go to chrome://inspect/#devices to open DevTools for an Android device.

3

If there were errors, then nothing would be displayed in the browser, right? :slight_smile:
There are no errors in the browser or in Android Studio.
I found out what the problem was by eliminating lines of code.
Capacitor does not understand this type of css style import:

import css from "./sheet.css" with { type: 'css' };

if you comment out this line of code and write it like this, then everything works:

// it works!
this.shadowRoot.innerHTML = `<style>
              #chat {
            width: 300px;
            height: 300px;
            margin-top: 50px;
            border: red thin solid;
            position: absolute;
            }
            </style>
          }

// it doesn't work!
import css from "./sheet.css" with { type: 'css' };
this.shadowRoot.adoptedStyleSheets = [css];