[WICG/webcomponents] Functionally complete declarative templating (Issue #997)

Part of `Declarative Web Application` stack proposals. Following discourse thread [Fully functional declarative template](https://discourse.wicg.io/t/proposal-fully-functional-declarative-template/6115).

Proposing the templating engine which would fit into "classic" template definition. 
# template as reusable resource
Once declared, the template it could be used as is. Unlike [TEMPLATE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) element, it can be reused without the need to be cloned on each instance.

For example, template could comprise just SVG image. This image would be reused without re-instantiation on each template use.

## ways to define
As the TEMPLTE element does not fit into requirements, it can not be used without significant update comparable with switching from `SCRIPT` to `script type="module"`. But the use of templating spread far beyond the inline template definition and as such the `TEMPLATE` alone is not sufficient. Here are some of template uses:
* inline. As the body of Declarative Custom Element definition
```html
<element>🖼️</element>
```
* inline with `id`. As a template to be reused by other components. 
```html
<head><template id="reused-one">🖼️ </template></head>
<body><img src="#reused-one"/>... <include src="#reused-one"/>
```
* external with local ID. Loaded on demand or by same deferred logic as SCRIPT. Note that ID in sample is local. There is no need to load the template without use or explicit instructions.
```html
<head> <template id="reused-one" src="template.html" /></head>
<body> <img src="#reused-one"/>... <include src="#reused-one"/>
```
* inline INCLUDE, no need for IDs.
```html
<body> <include src="template.html/>
```

# complete functionality
## full data access 
including data and input traversing as loop and in the depth, conditions, constants, and custom functions.

## rendering 
data injection as into final DOM and attributes. as into owned data layer.

## data injection
The data `slice` is outlined separately. Its internal presentation is hidden, exposed over (XPath) selector inside of template. 
`slice` samples:
* DOM payload of template invocation element.
* context properties 
    * attributes of template invocation element
    * window/page properties. URL, URL parameters, history, etc.
* external data. Covered in context of Declarative Custom Element. `http-request`, `local-storage`, and other DCE-compliant custom elements would emit the data `slice`.

## slot
is a backward-compatible with SLOT in TEMPLATE. Internal implementation would treat named SLOT as own `slice` 

## modular development with namespace insulation
has to be supported by template engine in order to be sufficient for "mature" platform which would include parts from different vendors and versions. XSLT does fit the bill with XML namespaces, modularity, custom functions, etc.

## asynchronous & streaming 
for embedded,  low-RAM, or low-CPU is critical to be able to
* defer the loading, initialization, and instantiation on demand. Be compliant with element hydration lifecycle.
* during loading, initialization, instantiation(s) be able to utilize the streaming so the final rendering could start as soon as sufficient initial data become available. 

XSLT 3.0 fits the bill with streaming on import of template and streaming the transformation output while the template is still loading.

# no side effects
is the  principle of Declarative Web Application itself and its components. The template should NOT bring external JavaScript and any another script which is capable to interact (change the state) with page and external elements. Only its content is subject for processing/modification.

# POC 
Most of proposed features can be polyfilled with current browser stack. You can try it withing the Declarative Custom Element 
proof of concept
[@epa-wg/custom-element](https://github.com/EPA-WG/custom-element#custom-element)
Is based on native in browser XSLT implementation, backward compatible with TEMPLATE+SLOTS, no shadow DOM. Does provide DX transparency on data layer and dev tools for debugging.

----------
This description is going to be modified to reflect the input. The clone of previous content will be added to the thread for reference.

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

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

Received on Tuesday, 4 April 2023 08:35:44 UTC