The default style might be anything that a Custom Element author wants.
In my case, I want to ship elements to end users, for those elements to have certain initial styling, and for the end user to be able to easily override the styles as if they are top level useragent styles.
More specifically, in my case, the custom elements are used in 3D scenes, and they have default styling like
transform-style: preserve-3d; position: absolute; among other styles. These styles are the default styles that give the elements their some of their default rendering functionality.
Currently, I style these elements via the
style="" attribute because otherwise styles in the top-level document won’t bleed into shadow roots. But the problem is these styles have the highest specificity and require
!important to override which makes managing styles more difficult for the end user. I could inject
<style> elements into all of the end user’s shadow roots, but that adds much unwanted complexity to my library code and unideal side effects to the user’s environment.
Useragent styles bleed into shadow roots, which is a nice way of having default styles across a whole app for all builtin elements. It’d be great to have this sort of least-specific styling for Custom Element authors’ elements.
Do you get what I mean?