If you build a custom element and it uses a child element with a CSS shadow part to expose its base styling, e.g. ::part(base), then this will be ignored if the custom element has content-visibility: auto.

So, if you want cards with box-shadow, the shadow styling has to be on the custom element itself, or :host, not the ::part() pseudo selector.

What is the simplest and most lightweight vanilla implementation of reactivity that anyone has seen for #HTML #CustomElements / #WebComponents in #JS

Really like this approach of using a few focused features to create a workable solution for creating custom elements.
https://github.com/JimSchofield/minne

Does anyone know a site collecting web components that focus on progressive enhancement and don't recreate everything known to the browser already with just another custom element? I'm interested in approaches to form handling as well as UI interactions like sorting items, drag and drop. Thanks!

In that it was dropped as part of a thread that you might have otherwise been uninterested in, sharing this again to start your Thursday:

https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/

Catch up on some techniques for managing connection time work in a custom element. There's even reasons for using shadow DOM hidden in there.

Thanks @nachtfunke for starting the convo on this and @zachleat for challenging a toot into a full on blog dump.

Unlocking the Power of Web Components: A Deep Dive into Reusable UI Elements

Web Components are revolutionizing the way developers create reusable UI elements, offering a standardized approach across various JavaScript frameworks. This article explores the core APIs and their ...

https://news.lavx.hu/article/unlocking-the-power-of-web-components-a-deep-dive-into-reusable-ui-elements

I'm writing this #PbtA -style story clock for
#storygames. It can be used as a form control or as a standalone custom element in HTML.

Now, I'm wondering if I could find some #RPG players or GMs who could help me get the user experience right.

Nice to see #React support #CustomElements (and thus #WebComponents). Can't help but think that's much better for React than web components, though...

https://react.dev/blog/2024/12/05/react-19#support-for-custom-elements

Are you building reactive UIs with custom elements? Like this? Or some other way? https://nathanherald.com/posts/reactive-dom-nodes-and-templates-for-custom-elements/ #html #customelements #webcomponents

I wrote about building templates for custom elements (web components) https://nathanherald.com/posts/building-templates/

I’m working toward fully reactive, web-native templates for my custom elements. How do you handle this?

It has been a long time I put anything "more serious" out in my blog, but hey, now there is something!

In short: a dump post of my current approach and understanding of HTML custom elements and how to fit them with React and TypeScript.

There is even a practical project to look at the end, even if it isn't a perfectly polished one.

https://vesa.piittinen.name/blog/2024/12/html-custom-elements

I’m already thinking about what would be great to have next year.
Yes, more CSS stuff, and especially, import attributes for CSS. Yes, more custom element stuff like a scoped registries.
But what would top my list would be tool to build and bundle CSS, HTML, and JavaScript in ways that’s aligned better with the browser as a platform.

TIL: try not to use globals in your custom elements: use `this.ownerDocument` instead of `document` and use `this.ownerDocument.defaultView` instead of `window`.

This makes your element more portable, easier to render in different contexts (server-side, service worker, etc), and it means you are always using the document and window the element is attached to… which could trip you up in the future if an element is moving between documents, etc. #dom #javascript #customelements #webcomponents

#Development #Techniques
Managing reactive state using custom elements · Signals work great in custom elements too https://ilo.im/160x7y

_____
#Signals #WebComponents #CustomElements #Framework #Preact #WebDev #Frontend #DOM #HTML #JavaScript

I wrote about managing complex reactive state with custom elements (web components). If you have considered building more complex / sophisticated web apps with custom elements, this is a pattern you def should know about. Also, I recommend using some sort of signals library, you’ll enjoy wiring it up to your custom elements. #webcomponents #customelements #signals #html https://nathanherald.com/posts/reactive-state-in-custom-elements/

New blog post: “A good way to hide non-defined custom elements”

https://blog.kizu.dev/non-defined-custom-elements/

This is a very short post about a thing that I have wanted to share for quite a while. I am pretty certain that someone already wrote about this at some point, but hey. There is so much content everywhere that it might be useful to repeat stuff, making it more likely someone will stumble upon a solution to their problem.

_Is_ this interesting? Not sure. It's been fun for a couple of recent #customElements that wrap native elements, but whether it's actually a good pattern or not...we can only clarify together!

Style Passthrough Elements? https://blog.westbrookjohnson.com/patterns/style-passthrough/

What's the bigger surprise, that by default a custom element isn't `display: block` or that it isn't `display: contents`?