[WICG/webcomponents] [dom-parts] HTMLTemplateElement.fromStrings() API (Issue #1019)

This is an API for template instantiation / DOM Parts suggested recently by Google's security team that caught my eye.

Essentially it's a imperative way to create a template and a list of parts from template strings, but without having to specify a syntax for expressions.

`fromStrings()` would be a static method that takes an array of strings (security wants this to be a TemplateStrings array to be unforgeable developer-controlled value) and create DOM parts _between each string_.

```ts
class HTMLTemplateElement {
  static fromStrings(strings: TemplateStringsArray): HTMLTemplateElement;
}
```

A template system can be built with this quite easily:
```ts
const templateCache = new Map();
const html = (strings, ...values) => {
  let template = templateCache.get(strings);
  if (template === undefined) {
    template = HTMLTemplateElement.fromStrings(strings);
    templateCache.set(strings, template);
  }
  return {
    template,
    values,
  };
}

function render(templateResult, node) {
  // clones the template, sets the part values, etc, using:
  // templateResult.template.content.getPartRoot().clone()
}


// Example usage
function renderName(firstName, lastName, about) {
  render(html`<x-foo name="${lastName}, ${firstName}">${about}</x-foo>`);
}
```

Where template strings are allowed to break and what type of parts those break create would have to be figured out, which is the same for a syntax. It could be that the syntax is the easier piece of the puzzle once that is done, but if syntax were a roadblock, this approach could side-step it for a bit.

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

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