Re: [WICG/webcomponents] Addressable comments (a very small DOM parts subset) (Issue #1116)

noamr left a comment (WICG/webcomponents#1116)

> > > 1. Attaching parts to the template. Right now we have to insert markers of the appropriate type (comments where we can, text in unquoted attribute values, comment data, and raw text elements), create the `<template>`, then walk the template content to find the markers. Because this is only comments it doesn't eliminate the tree walk. We would still have to have a walk for attributes, raw text, comments with bindings in them, and `<template>`s.
> > 
> > 
> > The idea is that you can most all of this efficiently with addressable comments, without having to walk the tree.
> 
> I don't think comments only will eliminate this tree walk. In this walk we look for things like attribute names with a suffix that means they're bound, and we search `<script>` and `<style>` and comments for marker text. We can't replace all of this with comments because unquoted attributes and comment text can't contain `>`.
> 
> > I wouldn't assume that it only supports child ranges. Child ranges are just a main use I had in mind.
> 
> Do you have any ideas for supporting attributes and ranges in raw text and comment text?
> 
> We are going from a list of strings like*:
> 
> ['<input .value=', '><div class="foo ', ' ', '">', '</div><style>', '</style>']
> then insert markers between the strings that represent the parts, then create a `<template>`, then clone, etc...
> 
> The HTML we currently generate from the strings looks like this:
> 
> <input .value$lit$=lit$x$><div class$lit$="foo lit$x$ lit$x$"><!--lit$x$--></div><style><!--lit$x$--></style>
> We place the markers where the string breaks are, and we do just enough tokenization to know whether we can place a comment or just a sentinel string, and to suffix bound attribute names, and a very, very tight code size and perf budget with which to do that tokenization.
> 
> So if this were going to be useful for us on that tree walk, we would have to be able to use comments everywhere. Otherwise what we really want is Part objects that can be attached to just about anywhere in a template (ie attributes, etc.) and cloned with the template.
> 
> * This would the the strings for a template like:
> 
> html`<input .value=${v}><div class="foo ${c1} ${c2}">${content}</div><style>${styles}</style>`

These are interesting but they all match what addressable elements can already do. pretty efficiently e.g.

```html
<input marker="$lit1">
<div marker="$lit2" class="foo current_c1 current_c2">current_content</div>
<style marker=$lit3>current_styles</style>
```

```js
    render(({v, c1, c2, content, styles}) => {
        const lit1 = app_root.querySelector("[marker=$lit1]");
        lit1.value = v;
        const lit2 = app_root.querySelector("[marker=$lit2]");
        lit2.setAttribute("class", `foo ${c1} ${c2}`);
        lit2.replaceChildren(content);
        const lit3 = app_root.querySelector("[marker=$lit3]");
        lit3.replaceChildren(styles);
    });
```

The thing that's hard to address is ranges...
Sure it's nice to also have attribute markers but do they actually make anything efficient? Seems like a thin user-space layer can do the attribute templating using element markers.

Either way, there might be a use case for attribute markers that I don't see yet but perhaps they are somewhat orthogonal to comment markers?




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

Message ID: <WICG/webcomponents/issues/1116/3531261651@github.com>