[WICG/webcomponents] [declarate-custom-elements] Capabilities needed and open questions (Issue #1009)

At the Spring 2023 F2F we talked about the need to discover all the open questions and dependencies on other specs that declarative custom elements have, in order to use declarative custom elements to help discover, prioritize other work.

Here are some questions and spec dependencies I can think of:

## Questions
- Declaration
  - How are attributes and properties declared?
    - How are attributes reflected to properties? Do attributes have converters for numbers, boolean, enums, etc?
  - How are styles declared?
    - Are they part of the template or can they be shared and adopted?
    - Can they be external? Or bundled and referenced from a nested sheet?
  - Are registrations always global, or can they be scoped?
    - If scoped, does the declaration establish an id that can be used to define the element in a scope?
    - If scoped, do we need a way to define all the child definitions that might be used?
  - How do you set ShadowRootInit options like mode and delegates focus?
- Scripting
  - Do declarative custom elements run with JavaScript disabled?
  - Will HTML Modules be importable from HTML with JavaScript disabled?
  - What is the base class for a declarative custom element? Does it directly extend HTMLElement, or is there another class with shared behavior?
  - Can a declarative custom element be enhanced with script?
    - How is that script associated with the element?
    - Must the script be inline, or can it be bundled?
    - Can the script be loaded late? Is there an upgrade-like step when it does?
- Lifecycle
  - How do elements detect changes to data?
  - When do element re-render? Synchronously or asynchronously?
    - If synchronously, how do you handle data-consistency? ie `<img src="/avatars/{{lastName}}/{{firstName}}.jpg">` will make erroneous requests if `firstName` and `lastName` are set at the same time.
    - If asynchronous, on what timing? Microtask? Is there an API for waiting for an element to update?
- Templates
  - What are the semantics of template updates?
    - Is static DOM guaranteed to not be updated when re-rendering the same template?
    - Are bindings dirty-checked?
      - If os, do we need an opt-out for binding to stateful properties like `input.value`?
    - If a new template (ie from a different branch in a conditional) is rendered, does it clear the existing DOM?
  - How are event listeners added in templates?
    - Do event listeners make sense in declarative custom elements? What kinds of things could they do? Fire another event? Assign a property?
  - How are properties set on elements in templates?
    - How do you set mixed-case properties?
  - How are conditional and looping handled in templates?
    - Is there a keyed looping construct?
  - Can templates be shared? Is there a sub-template "call" operation and a named template declaration?
  - What is the expression language for bindings? Is it a subset of JS?
    - Does it support literals? Array literals?
    - Does it support optional-chaining and nullish coalescing?
    - Can expressions contain method calls? If not, does the scope for expressions need a wrapper over some of the DOM to turn methods into getters? (ie `this.getAttribute('name')` -> `this.attributes.name`)
  - What is the data model available to to expressions?
    - Is the scope something like class scope where you have the globals and `this`?
  - What happens if expressions throw?
  - Is there a way to remove an attribute that has bindings? ie `<img src="/foo/{{bar}}.jpg">` when `bar` is null
- Security
  - Do declarative custom elements introduce a script gadget vulnerability?
    - Do they only run when script would have run? ie, not from innerHTML?
    - Are they inline script for CSP?
    - Do they support nonces?
  - Is expression evaluation sanitized?
    - Do we denylist things like `window.location` which can be used to exfiltrate data in bindings?
    - Do we denylist the Function constructor which can be used to eval code?
  - Are bindings in text positions always escaped?
  - Can bindings to attributes do contextual autoescaping? (disallow `onclick="javascript:..."`)
- Can ElementInternals properties be set?
  - How do you define ARIA properties?
  - How can an element be a FACE?
  - How can ARIA associations be made across children shadow boundaries?
- SSR
  - How do declarative elements handle an existing shadow root from declarative shadow DOM (hydration)?
  - Do we need a deferred hydration system to ensure top-down initialization?

I'm sure there are many more questions than this, of course.

## Probable Spec Dependencies
- DOM Parts
- Template Instation
- Expressions
- Declarative ARIA
- Hydration
- Declarative CSS Modules
- ...

## Use cases

Many of these questions need to be driven from use cases. We'll need to know what kind of elements we're trying to allow to be built. One of the most import questions there whether interactive elements are in scope. For example, can you build the basic counter element that's a common framework example? That alone requires event listeners and self-updating state.

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

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