Create a `CustomElement` definition

[yoshuawuyts]

It should be possible to define <custom-element></custom-element> elements, and append them to other elements. We probably need to:

1. Define a new CustomElement type
2. Give it a constructor which takes a name
3. Enable it to define custom attributes
4. Enable all existing elements which have children to also take a CustomElement as a child

[yoshuawuyts]

We should do this using Declarative Shadow DOM.

References

• Declarative Shadow DOM | Chrome Developers
• Experimental Spec
• <template> tag on MDN
• Declarative Shadow DOM | Webkit
• caniuse
• Firefox bug tracker (position: positive)

Example

Given this HTML:

<host-element>
    <template shadowrootmode="open">
        <style>shadow styles</style>
        <h2>Shadow Content</h2>
        <slot></slot>
    </template>
    <h2>Light content</h2>
</host-element>

We should be able to write this Rust code:

CustomElement::new("host-element")
    .template(|t| t
        .shadow_root_mode("open")
        .style("shadow styles)
        .h2(|h2| h2.text("Shadow Context"))
        .slot(|_|))
    .h2(|h2| h2.text("Light Content");

Tasks

• [ ] Add a new CustomElement type to the root of html
  • [ ] It should have access to arbitrary data- properties
• [ ] In the generator, ensure CustomElement can have every single node type as a child
• [ ] In the generator, ensure CustomElement can be a child of every single node type
• [ ] Temporarily extend template with the non-standard shadow_root_mode property. We should do this declaratively by adding new custom .json mixin files.
  • Adding the aria properties already required merging multiple definitions. This should just be one more.

[yoshuawuyts]

Added the "help wanted" label to this. This should be fairly self-contained, and probably a fun one to pick up if anyone wants to. Doing this should enable us to build modular component-based server-rendered pages, which seems like a pretty big deal.