[paranoidxprod]

Would love to know how they went about implementing these. I always find custom elements interesting. I know the guys over at data-star.dev used one to implement their inspector element, but unfortunately that is also behind pro.

I know Lit is used a lot but I’m always looking for new approaches.

[WorldMaker]

Since you are asking about other approaches, I've been doing some interesting and simple custom elements with my Knockout-inspired view engine [0]. I built an open source MPA application with a bunch of them [1]. I even gave a brief presentation on it [2] (each PR starting with #2 is a "slide"; I presented it in a "Presentation" profile for VS Code opening the numbered files in order, with the Live Preview extension side-by-side with a simple git alias to jump to "slide" merge commit based on PR number; I thought it went well to show off Developer Experience).

My biggest advice appears to be: remember that the Shadow DOM is optional.

[0] https://worldmaker.net/butterfloat/guides/web-components/

[1] https://github.com/WorldMaker/jocobookclub/tree/main/src/bf

[2] https://github.com/WorldMaker/butterfloat-presentation/pulls...

[gavinray]

It's explained in the post.

[cluckindan]

They don’t mention whether the custom elements are using shadow root and whether it’s open or closed mode.

That has implications for event handling and style encapsulation.

[owebmaster]

it is easy to check using inspect. They are not using shadowDOM which is great.

[paranoidxprod]

I mean they mention the built in browser features they use, but make no mention of the actual authoring of the components unless I’m missing something. I’m curious if they’re leaning on existing frameworks for authoring web components or if they’re implementing them from scratch.