[rektide]

Honestly, I had it the other way for quite a while: Shadow DOM harmed my adoption/excitement of Custom Elements for a long time. :) I spent quite a while back in the day with x-tags and other Web Component things, trying to avoid Shadow DOM, because I wanted everything on the page & not nested in subdocuments.

These days I'm more open to anything. It's definitely a bit exciting everytime I need to parse something with Shadow DOM, a lot more work to really understand what the page is. Last thing I had to parse was chrome://gpu, and it took 3 hours instead of 1 hour to do the job, but could have been worse. But it was at least possible. Sometimes though, with closed shadowroot, the page has gained a resistance to userscripts (as this commenter reports[1]), and this seems purely evil/bad/totalitarian, in a distinctly un-web way!

Weirdly Web Components and Shadow DOM are both tools in the same effort, but Web Components is trying to get everything clearly onto the page, and Shadow DOM has always felt like trying to hide a lot of the page; as someone who loves the web as an interchange of information, Web Components seemed interesting & enriching & useful & value add, and Shadow DOM seemed like a tightening/winnowing/control thing, that didn't express my values. More neutral today, and seeing things like CSS styling performance wins it's clear there are solid technical wins for the platform, but especially closed Shadow DOM feels so overtly control-oriented & totalistic in design, in direct counter to the openness / togetherness / intertwingularity that made the web so interesting & rich & unique a computing space. (It still remains unclear to me that closed shadow-root disappearing into your own pocket universe ought to be permitted, but I'm not as scared as I was.)

[1] https://news.ycombinator.com/item?id=34782009

[Andrex]

> Shadow DOM seemed like a tightening/winnowing/control thing

This is useful when you need to apply constraints on teammates, same as applying a linter to your project's CSS. You need to guarantee your internal components work well together.

If your style is more "make a component and throw it over the wall for people to use," making everything "public" may be a better approach.

But most web components will never be public or shareable, and that's OK.

[binhqx]

Custom Element Registries can become a problem for organizations with multiple teams working on the same page, as they may inadvertently create elements with the same name, or need bug fixes or new features causing conflicts and preventing individual teams from deploying updates.

The result is that teams need to coordinate their updates and deploy them simultaneously, slowing down the development process. This problem has been recognized in the Web Components community, and some initiatives are underway to address it, such as Scoped Custom Element Registries.

Scoped Custom Element Registries provide a way to isolate the scope of custom elements, preventing name collisions and enabling individual teams to work independently on their components without affecting the rest of the page. This approach has the potential to improve the development process for organizations with multiple teams and streamline the deployment of updates.

However, this solution is not widely adopted yet, and it may take some time to gain traction. In the meantime, organizations may need to develop their own internal guidelines and procedures to manage custom element name collisions and coordinate their updates.

[ptx]

Maybe XHTML (with XML namespaces) wasn't such a bad idea after all?

[Fire-Dragon-DoL]

This sounds amazing. Probably my major problem with custom elements. Coming from angular 1,this was an enormous problem as the app grew.

[jacobr]

I hear you. I think Shadow DOM is very useful for a handful of roots on your page, encapsulating third-party widgets or DOM-heavy components like a nested navigation.

Custom Elements on the other hand are useful for attaching behavior to HTML, sort of like jQuery plugins.

Not at all sold on the frameworks promoting using Shadow DOM for every button or whatnot.