Re: [WICG/webcomponents] [dom-parts] Declarative syntax for creating DOM Parts (Issue #1003)

I've been using `{prop}` and `{deep.prop}` originally, but found better value in restructuring the concept around `query`, `subqueries` and `processors`. I'm now considering adding `scope` In other words:

````html
<x-card>
  <h1 x-if={!!firstName}>{firstName}</h1>
  <x-progress x-if={!ready} value={expressions:computedStatus}></x-progress>
</x-card>
````

Restructured `{!!firstName}` means `!!firstName` is a query, `firstName` is the `subquery`. and `!!` is a `processor`. In terms of rendering, `firstName` is a repeated subquery, therefore only looked up once, not twice. Assume `computedStatus` has a complex getter that does math operations (expression). 

I know `lit` and `vue` have their own processors, like `?`. The ability to register our own processors would be interesting, since covering all use-cases would be impossible. Instead of symbols (`/[^a-z]+/`, perhaps even function-like parentheses like `toBoolean(firstName)` as processors.

I've noticed I've been "polluting" my prototype with expressions (`computedStatus`). So I've been considering adding something of a `scope` to each query. Not specified, it would just use `this`. But a custom scope could be useful. There's no reason to expose `computedStatus`. It could possible be better scripted as `{expressions:computedStatus}` (with a shorthand probably as `e:computedStatus`).

The resulting syntax would be `{` `processors` `scope` `subquery` `}`

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

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