Declarative Custom Elements: Concepts Demo Day

[trusktr]

Reply here with a link and description of your concept to present on demo day (18 March). 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.

EDIT Apr 5 2025: Another HTML Modules proposal, which is similar to @EisenbergEffect's proposal, but using JavaScript to export things instead of export attributes:

• https://github.com/WICG/webcomponents/blob/gh-pages/proposals/html-modules-proposal.md

[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.