Declarative Custom Elements: Proposal Demo Day

[trusktr]

Reply here with a link and description of your concept to present on demo day. I'll update OP to list them:

• Tram-Deco - @JRJurman - A DCE implementation that leans on Declarative Shadow DOM, existing Web Component APIs, and has some affordances for external component definitions (nothing super close to HTML Modules, but would certainly benefited by it 😅).
• element-modules - @trusktr - Proof of concept of declarative custom elements that are importable from .html files or JS files, no build step or tooling needed, in an HTML-first format akin to component systems like Vue or Svelte with JS being optional.
• custom-element - @sashafirsov - Pure declarative DCE POC
• "HTML Modules and Declarative Custom Elements Proposal" - @EisenbergEffect
• define-element - @dy - Custom element to declare custom elements. (Similar to in SVG).
• heartml - @jaredcwhite - Define Heartml components entirely in JavaScript, in declarative Single-File Component HTML module files, or simply embedded directly in any HTML page.
• stampino-element - @justinfagnani - A web component for creating declarative web components. That is, defining web components entirely in HTML.

[JRJurman]

I would love to talk briefly about Tram-Deco, a DCE implementation that leans on Declarative Shadow DOM, existing Web Component APIs, and has some affordances for external component definitions (nothing super close to HTML Modules, but would certainly benefited by it 😅).

[trusktr]

element-modules - Proof of concept of declarative custom elements that are importable from .html files or JS files, no build step or tooling needed, in an HTML-first format akin to component systems like Vue or Svelte with JS being optional. codepen.io/trusktr/pen/gOEWGXV

[thescientist13]

On the topic of HTML Modules, I would like to demo supporting the (DX) use case for the separation of technologies / concerns (whichever side you land on!) that would now be unlocked by extending the module system all the way through to HTML. 💯

// hero.js
import sheet from './hero.css' with { type: "css" };
import template from "./hero.html" with { type: "html" };

export default class Hero extends HTMLElement {
  connectedCallback() {
    if(!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });

      this.shadowRoot.appendChild(template.content.cloneNode(true));
      this.shadowRoot.adoptedStyleSheets = [sheet];
    }
  }
}

customElements.define('app-hero', HeroBanner)

<!-- hero.html -->
<div class="hero">
  <h2>This is a really nice website!/h2>
  <img src="/path/to/image.png">
</div>

/* hero.css */
:host {
  text-align: center;
  margin-bottom: 40px;
}

:host h2 {
  font-size: 3em;
}

I'm honestly less opinionated about what the actual return value is, aside from just making the use case / developer workflow possible, be it <template> or a document fragment.

I don't have a full demo yet but will be able to provide it next week (yay OSS vacation!) with SSR, depending on when we need to present by and if any other folks would be interested in this as well.

---

I've chosen to use a <template> partially because I could see this being augmented with DOM Parts and I think those were mentioned in the proposal, but as mentioned, I'm not super opinionated outside of just ensuring compatibility since i believe this would / could work really nicely together. 🤩

// this vision aims to support the separation of concerns / technologies use case for Web Components
import sheet from './hero.css' with { type: "css" };
import template from "./hero.html" with { type: "html" };

export default class Hero extends HTMLElement {
  connectedCallback() {
    if(!this.shadowRoot) {
      // with DOM Parts
      const heading = this.getAttribute('heading');
      const heading = this.getAttribute('image');

      template.heading.value = heading;
      template.image.value = image;

      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
      this.shadowRoot.adoptedStyleSheets = [sheet];
    }
  }
}

customElements.define('app-hero', Hero)

<div>
  <h2>{{heading}}</h2>
  <img src="{{image}}" />
</div>

[trusktr]

@thescientist13 is there a link to your concept, or a concise description I can paste in the OP?

[trusktr]

@sashafirsov what's the conciese description for yours that I can use for the list in the OP above?

[trusktr]

@EisenbergEffect what's the title and description for yours to put in the list in the OP above?

[EisenbergEffect]

Well, the document is just titled "HTML Modules and Declarative Custom Elements Proposal".

[trusktr]

@EisenbergEffect 👍 updated the list in the OP

[sashafirsov]

@trusktr ,

what's the conciese description for yours that I can use for the list in the OP above?

I guess "pure declarative DCE POC" would fit the bill.

[sashafirsov]

Not sure, should those be listed among implementations, as custom-element is more functional.

• css-chain - shadowless <template> with slots implementation, jQuery style

Pure declarative DCE:

• slotted-element - slots without shadow
• shadow-dom-element + light-dom-element - DCE based on template only functionality, shadow and shadow-less.

[dy]

I've done some research / work on possible approaches to DCE as well https://github.com/dy/define-element/blob/main/README.md

Some solutions are tentative, others are more-less tested out / proven.

[jaredcwhite]

I have a library that supports DCE, and also supports defining components in HTML Modules, but not DCE directly inside an HTML Module so I want to try to add that and then I'll throw my hat in the ring. I'll try to get that done later in the week…if not I'll let you know I might not make it in time.

[jaredcwhite]

Still lots to document, but you can take a look now at Heartml, and in particular the sections on Module files and DCEs (scroll down a bit).

Obviously Heartml encompasses a lot of concepts beyond what we'd been looking at for immediate specs inspiration, but the various pieces you could imagine getting closer to the "metal" over time (aka template syntax could get closer to Parts, it could use native Signals instead of the Preact library, property/attribute reflection, etc.)

FYI, a lot of this stuff is already in production on a few sites I run. Pretty fun stuff!

[justinfagnani]

I would like to demo Stampino Element: https://github.com/justinfagnani/stampino-element

[intervalia]

At some point I would love to demo my transpiler: https://www.npmjs.com/package/@evolvedweb/wc
https://www.evowc.com/docs/intro

[jogibear9988]

I've also added a simple DCE to my BasicWebcomponent (https://github.com/node-projects/base-custom-webcomponent) wich I'd like to show.
I can also show my Designer: https://node-projects.github.io/web-component-designer-demo/index.html wich also supports usage of DCE (and all other webcomponents)
I could also show webUi wich is a UI designer for iobroker (a homeautomation system), in this I've included the concept of desinging components in the ui, and reuse them as webcomponents in other views (http://129.159.205.3:8082/webui/index.html)

[iammoonman]

Small syntax idea I'd be happy to talk about for doing reasonably familiar declarative logic in the template: https://gist.github.com/iammoonman/986ffd0fcfda884dfcf00508635882e6

[Westbrook]

@dy and @jaredcwhite please share you availability for the next Demo Day so we can include your work: https://www.when2meet.com/?24156364-pOaZk

[JRJurman]

We're going to need 3 demo days at this point 😆

[jogibear9988]

Workin sample of DCE version of my web component library:

Sample

you could edit the declaritive custom element, and the changed template is adopted on all instance of the element already created. Don't know if this is something that should be possible/used at runtime, but for designtime I think it's usefull.

Supports Bindings (to Atrributes, Properties, Styles, two-way), Events (with direct included js code).

One downside atm is, a changed value refreshes all the bindings, this is smth. I've to find a good solution for.

[Westbrook]

Great sessions all. Be sure to continue the conversation in the various discussions opened around this.

[dy]

@Westbrook is there particular reason define-element was omitted?

[Westbrook]

If I omitted something in some way, it was by no mean intentional. Feel free to create any issues, discussion, or whatnot that I may have missed trying to cover the large amount of really amazing work by you and the rest of the participants.

[dy]

https://github.com/kgscialdone/facet
https://github.com/vimeshjs/vimesh-ui