Re: [w3c/webcomponents] HTML Modules (#645)

> > Furthermore, for various performance reasons, we really need to have a mechanism to define an in-file ES6 module; a mechanism which allows multiple modules to be defined within a single JS file. Once we have that, then it's very natural to define three modules: one with HTML, one with CSS, and one with JS in a single JS file.
>
> Is this idea presented or discussed anywhere?  This is very interesting and I would like to learn more about it.

The idea is to allow a declaration of multiple modules per file.

e.g.
```js
import X from module { export const X = 1; }
import Y from module { export function add(x, y) { return x + y }; }
```

Now suppose we had the capability to import a pure HTML file and a pure CSS file as follows. I'm inventing a new syntax `import X from Y as Z` where `as Z` defines a custom module importation behavior. Also note that `HTMLStyleElement.prototype.sheet` is readonly at the moment but I'm making it writable here to make it possible to set the style created in a script.

```js
import template from 'my-template.html' as HTMLTemplateElement;
import styleSheet from 'my-style.css' as SheetStyle;

MyCustomElement extends HTMLElement {
    constructor() {
        const root = this.attachShadow({mode: 'closed'});
        root.appendChild(document.importNode(template));
        root.appendChild(document.createElement('style')).sheet = styleSheet;
     }
}
```

Combining these two features we would be able to do something like this:

```js
import template from module `
<div>hello, world</div>
` as HTMLTemplateElement;

import styleSheet from module `
div { color: green; }
` as StyleSheet;

MyCustomElement extends HTMLElement {
    constructor() {
        const root = this.attachShadow({mode: 'closed'});
        root.appendChild(document.importNode(template));
        root.appendChild(document.createElement('style')).sheet = styleSheet; // sheet is readonly at the moment.
     }
}
```


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/645#issuecomment-310811695