Re: [WICG/webcomponents] HTML Modules as a leaf node in the module graph or not? (#805)

I have an expectation of this being the case: HTML importing inactive document fragments. Now that dust seems to be settling with the basic JSON/CSS import, it seems HTML would likely be next.

Currently, I have two instances where processing of the HTML as an active document would produce incorrect reaction. They actually sit in the same code:

````html
<link _if={_showSlot} id=link rel=stylesheet href={fontLibrary} />
<svg _if="{showSVG}" id="svg" viewBox="{_computedViewBox}">
  <use id="use" _if="{svg}" href="{svg}" fill="currentColor"/>
  <path id="path" _if="{_computedSVGPath}" d="{_computedSVGPath}"/>
</svg>
<img _if={src} id=img
  disabled={disabled}
  alt={alt} src={src} srcset={srcset} sizes={sizes}
  crossorigin={crossOrigin} usemap={useMap} ismap={isMap}
  referrerpolicy={referrerPolicy} decoding={decoding} loading={loading}
  width={width} height={height}
/>
<slot id=icon class={fontClass} hidden={!_showSlot} aria-hidden=true></slot>
  `````

[Context](https://github.com/clshortfuse/materialdesignweb/blob/ab00cc53988a7d2c73d0578575f2beb80f821dbe/components/Icon.js#L94-L108)

I would like to move the above out of the JS and into an HTML file. That's how the CSS import works and it's easier to manage linting and minification when we don't try to put layout, styles, and scripts all into one file (JS). If we want everything in one file, we'd just use JS.  Also inline styles are both less performance than CSS Stylesheets and we have CSP concerns about JS in HTML.

To the point:

1) We would expect the `<link>` to not get process until the templating system has run its course since the `[href]` is invalid at the time of parsing, to be populated based on input later.

2) We would expect the `<img>` to also no get process since the `[src]` is not valid yet.

Both cases are solved in HTML-in-JS by using an inactive document to generate a fragment later. If the fragment has `<script>` or has `<styles>` nodes, those don't "activate" until there are adopted into the active document. That happens when we take "template" fragment, and interpolate it into an "cloneable" fragment. That fragment then gets cloned into the shadow root.

````js
`root.append(this.cloneable.cloneNode(true));`
````

Considering how Web Component only really trigger this process if they are present in the page (ie: just defining in registry doesn't immediately call these steps), it would be wasteful to have to import HTML and "activate" them during the definition phase of Web Components. If authors want to immediately trigger document fragment adoption, `document.adoptNode(fragment)` seems to work just fine:

````js
let inactiveFragment = document.implementation.createHTMLDocument()
  .createRange().createContextualFragment('<img src="http://invalid" />');
/* Nothing happens */
document.adoptNode(inactiveFragment);
/* Browser throws error trying to fetch `http://invalid` */
````

I'd imagine the newer syntax would look like this:

````js
import template from "./template.html" with { type: "html" };
document.adoptNode(template);
````

Again, you only need to call `adoptNode` unless you want it start processing immediately. Cloning the template into `Element` already on the active document will automatically adopt it: (eg: `shadowRoot.append(template.cloneNodes(true))`).



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

Message ID: <WICG/webcomponents/issues/805/1483301378@github.com>