Through the conversation, I wondered whether the misunderstanding that a #customElement directly correlates to a #frameworkComponent was eased or expanded with the theoretical advent of an HTML Module. Much of what we were seeing as #htmlModules seemed more directly related to what we see in #frameworkComponents, which seems like an interesting path to investigate.

With #domPart and HTML Modules, it it possible to recreate what we know now as a #JSFramework in just HTML!?!

@eleventy That's a hot little #customElement! And so useful/informative, too.

Exciting

@leben

I'm unsure why I have to make the CSS files to bleed both sides (shadowDom, and calling page), I'll learn about that eventually.

Also, its script[type=module] import. Different from past years. Exciting times!

Refer to source served from here:

https://renoirb.com/esm-modules/app-layout-element.mjs

I'm working on a fork of @traceypooh 's blogtini but using #customElement and separating concerns. It's broken, in progress. Hope that helps you.

/cc @heydon

Hi @leben

Hi, sorry for interjecting.

I've been experimenting with bleeding StyleSheets for another purpose last week. In my case, separate the "chrome" (common layout of pages) into a #customElement [1] #WebComponent, here is an usage example [2] look "view source", it's kinda neat!

Hope this helps.

1: https://renoirb.com/esm-modules/app-layout-element.mjs
2: https://renoirb.github.io/blogtini/using-app-layout.html

/cc @heydon

@bramus @mia @Una Blog post scale; short version: #SpectrumWebComponents themes the system over single components, hoping to ship the smallest amount of JS for an app w/ many components, but it buys you into the system. Focusing on a the #customElement, off loading CSS strings for Adopted Stylesheets to CSS files w/ Import Assertions means more styles can live w/ the components, while maintaining similar complexity & helping prioritize single component usage, allowing to serve more user types.

@mia It is very possible that Container Style Queries are the CSS feature that I've been most excited about the last number of year, and it is super cool to see more examples come together leveraging them and nudging browsers tiny little steps closer to shipping! Thanks for pushing this so hard for the rest of us. Binding this with Import Assertions for CSS is gonna take #developingDesignSystem with #customElement and #shadowDOM to a whole new level.