DCE Demo Discussions: element-modules by Joe Pea

[Westbrook]

As presented on 18 March to the WCCG,element-modules is a proposed approach to declarative custom elements by @trusktr.

Links TK as available.

Further discussion and questions below.

[JRJurman]

I'd be curious, in the absence of any wrapping template or view element, how you control the shadowroot configuration (e.g. delegatesfocus). Would that be on the <element> tag?

[trusktr]

Perhaps template-less would default to having a shadow root. There could be an attribute on the element tag. Or there could be a rule that if one adds a template element (or multiple) then the first one becomes the element's template (the rest could be ignored). Or something. We need to define what behavior we want.

Even if we decide that a single template element should be used, the question "what happens to elements outside of it" still needs to be answered either way.

To me, having just <element> with some options via attributes, seems like the simplest interface for the dev experience, although maybe there are other reasons to go with sub-elements that I might not be aware of.

Let's compare these two:

<customelement tag="my-el" shadowroot="open"> <b>Name: </b><span><slot></slot></span> </customelement>

vs

<customelement tag="my-el"> <template shadowroot="open"> <b>Name: </b><span><slot></slot></span> </template> </customelement>

And how do we specify no shadow root (render as children)?

Another possibility is this:

<template customelement="my-el" shadowroot="open"> <b>Name: </b><span><slot></slot></span> </template>

where having or not having a shadow root is based on the presence of the shadowroot attribute, meaning that converting between both with-root and without-root is easy to do:

<template customelement="my-el" shadowroot="open"> <b>Name: </b><span><slot></slot></span> <script>/*...*/</script> </template>

vs

<template customelement="my-el"> <b>Name: </b><span></span> <script>/*...*/</script> </template>

That would be similar to just having <element> or <customelement> be the element with the options (with same naming for shadowroot attribute as with template:

<customelement tag="my-el" shadowroot="open"> <b>Name: </b><span><slot></slot></span> <script>/*...*/</script> </template>

vs

<customelement tag="my-el"> <b>Name: </b><span></span> <script>/*...*/</script> </template>

I think that when we make a DCE spec, defaulting to having ShadowRoots would be good (default to shadowroot="open", and add an additional option like shadowroot="none" if people want to opt out). This will lead to the most consistent default behavior for the developer experience including slotting (as with Vue, Svelte, and other declarative component languages).