Using Parcel with Web Components with seperate html and css files

[Deel96]

In my Web Component I have the lines:

import html from './ListComponent.html'
import css from './ListComponent.css'

export class ListComponent extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: "closed" });
shadow.innerHTML = html; //works
const style = document.createElement("style");
style.innerHTML = css; // object is empty
shadow.appendChild(style);
}

The html part works and I get a string with the html content.
The css part fails and innerHTML gets set to [Object object].
Also all css files that are imported like above get bundled and are global styles.

I know that I could add a tag to the html file, but I would like to import it the same way as the html. Is that possible?

[mischnic]

Which Parcel version are you using?

With Parcel 2, loading css from a seperate CSS file is possible (see the very bottom of https://parcel2-docs.now.sh/getting-started/plugin-config/), though I haven't tested it with an HTML file yet.

[Deel96]

I use parcel 1.12.4