This is an intended side effect of using a shadow DOM. I tried to outline the advantages in the Customizing section of the docs [1] and I think these three points will answer your question.
- Customizations can be made to components with explicit selectors, such as ::part(icon), rather than implicit selectors, such as .button > div > span + .icon, that are much more fragile.
- The internal structure of a component will likely change as it evolves. By exposing component parts through an API, the internals can be reworked without fear of breaking customizations as long as its parts remain intact.
- It encourages us to think more about how components are designed and how customizations should be allowed before users can take advantage of them. Once we opt a part into the component's API, it's guaranteed to be supported and can't be removed until a major version of the library is released.
Understood - I'm more of an old-skool CSS kind of person, but this explanation makes good sense.
I had another look at the docs, but I still don't see anything about the benefits of shadow DOM for this library (unless the benefit is the "part thing"?)
The shadow DOM encapsulates styles and behaviors in the component. Nothing leaks in, nothing leaks out.
The concept can get confusing, especially once we start talking about how styles reflect on slotted content (i.e. elements in the "light DOM") vs. shadow DOM elements, but that's probably more relevant to component developers rather than consumers.
- Customizations can be made to components with explicit selectors, such as ::part(icon), rather than implicit selectors, such as .button > div > span + .icon, that are much more fragile.
- The internal structure of a component will likely change as it evolves. By exposing component parts through an API, the internals can be reworked without fear of breaking customizations as long as its parts remain intact.
- It encourages us to think more about how components are designed and how customizations should be allowed before users can take advantage of them. Once we opt a part into the component's API, it's guaranteed to be supported and can't be removed until a major version of the library is released.
1. https://shoelace.style/getting-started/customizing?id=compon...