- From: edbaafi <notifications@github.com>
- Date: Fri, 21 Feb 2025 14:49:44 -0800
- To: WICG/webcomponents <webcomponents@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <WICG/webcomponents/issues/645/2675771280@github.com>
edbaafi left a comment (WICG/webcomponents#645)
Hello [justinfagnani](https://github.com/justinfagnani) and all! I'm not sure if this is the right place to post this, but now that the [import attributes proposal](https://github.com/tc39/proposal-import-attributes) has reached stage 4, and all major browsers besides Firefox are already supporting `import json from './some.json' with {type: 'json'}` (and [Chrome supports `{type: 'css'}`](https://web.dev/articles/css-module-scripts)) perhaps it's time to revisit the JavaScript side of the HTML import question.
Consider the following:
```
import styleSheet from './custom-element.css' with {type: 'css'};
import template from './custom-element.html' with {type: 'html'};
export class CustomElement extends HTMLElement {
#shadowRoot;
constructor() {
super();
this.#shadowRoot = this.attachShadow({ mode: 'closed' });
this.#shadowRoot.adoptedStyleSheets = [styleSheet];
this.#shadowRoot.appendChild(template.content.cloneNode(true));
}
}
```
This is basically what [jfbrennan](https://github.com/jfbrennan) posted above but using the newly added `with` syntax.
I'm already doing this with a rollup plugin at build time and it feels really clean.
Any thoughts?
--
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/645#issuecomment-2675771280
You are receiving this because you are subscribed to this thread.
Message ID: <WICG/webcomponents/issues/645/2675771280@github.com>
Received on Friday, 21 February 2025 22:49:48 UTC