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

I've kinda moved to just wanting HTML to parse HTML and then some extra code for the client to consider how to use it. It then moves to the current, live document decides when and how to adopt the imported HTML to the current, live document.

For example, if an HTML import has a `<link>` URL. Should it *always* start fetching that link? If it has imports of other JS scripts, does it happen before it lands on the JS. What about a synchronous, ES5 script? Does it need to run to completion before it's handed back? Could a `<script>` change its own document and add another `<script>`. Can it dynamically build a `<link>`?

It kinda leans to an HTML import should probably be a DocumentFragment + extras. This would be similar to how `HTMLTemplateElement` has a `content` property that returns a `DocumentFragment`. Those extras could be invocation functions/properties that depend on the intended purpose JS side. If it's to be used as a Web Component, maybe it'll be cloned during the `constructor` phase. That means that if it's never called nothing happens.

If it's to consume the JS inside it, maybe a `importedHTML.modules` call which can be synchronous for those that want it as a critical for runtime: `import { modules } from 'file.html'`. Or you can do it asynchronously with `await import`.

If it's a set of resources, we might want to immediate start fetching those resourced by calling `document.adoptNode`.

What really gets interested is, should we just lock all the new intended functionality behind an import? For example CSS imports are just constructed `CSSStyleSheet`. What if, in the interest of minification, I want to bundle it that functionality into one file, either in JS, or part of the main HTML file. Do I need to tell the browser to import an HTML file to get the import scoping? That means a call back to the server to return a resource, which is wasted time. Couldn't this functionality be added to `HTMLTemplateElement` instead, so I can stick that in my `index.html` and reference it from my bundled `index.min.js` instead?

Right now, I'm experimenting the use case of splitting a page that has something like 30 different Web Components as critical and non-critical Web Components. As of now, HTML-in-JS requires parsing of the string and that's done synchronously. That means my Web Components are loaded in series. I would like them be loaded in parallel by using `await import` with an HTML Module. It'll reduce the deployment size since we don't need to bundle non-crtitical HTML as strings. We can already do this with CSS, as the browser will return a parsed `CSSStyleSheet` done so without interrupting the JS runtime. So it makes sense we should be able to do this with HTML as well.

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

Message ID: <WICG/webcomponents/issues/645/1485062804@github.com>