ELIF: Why ShadowDOM everywhere? That hurts UI customizations outside of Lovelace

Development
1

This is a very simple and innocent question, indeed. Not trying to point fingers, but at best, bring a healthy discussion to the table.

I was trying to write some simple UserStyles (via the Stylus extension for Chrome) to use on the browser I mainly run configs from, and discovered the hard way that shadow DOM elements are fenced from user changes. Also, that pretty much everything from the HA interface is inside nested shadow roots.

Is that by design, some sort of security measure against some tampering? Or is that a natural consequence from the overall UI structure, or framework, used in HA?

To be clear, I’m not trying to custom-style the Lovelace dashboard, but instead simplify some parts of the Automation form.

EDIT: also noticed this affects the ability of uBlock Origin to block interface parts; the best it can do is find the whole home-assistant element.

2

I’m no frontend dev but I think it is mainly used to prevent styling conflicts.

3

The interface is built out of custom elements. See them as modules for front-end development. With thos3 you can register extensions on the native HTML elements to create complex interfaces with less complex code. Like modules in backend development the custom elements are scoped to their own context. They have their own DOM, and those are in the shadow DOM.

You can with built in Javascript modules extend and build on those. This is also how custom cards work in Home Assistant.