Hello,
This is not really a bug, but rather a question about the design decision.
When you are using a component, let’s say s-badge, properties are reflected in the underlying shadow dom. For instance, the tone attribute is added as a class:
The code is minified so it’s hard to see, but I suppose that internally you are using an attributeChangedCallback to monitor properties, and generate the class, so something along this:
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<div class="badge tone-${this.getAttribute('tone')}"><slot></slot></div>
`;
Then, a CSS is generated with a constructable stylesheet:
As all Polaris components have their own shadow root and are completely scoped, I wonder if a better approach would not be to take advantage of the host selector, so instead you would just generate this:
this.shadowRoot.innerHTML = `
<div class="badge"><slot></slot></div>
`;
And, in your CSS, use the :host selector like this:
.badge {
// Default style
:host([tone="warning"]) & {
// Override for the warning
}
}
The main benefit being that you no longer need to monitor attribute for the sole purpose of styling. Of course, some properties might be more complex and would requires the attributeChangedCallback, but for ismple use case it would reduce the lines of code.
I’m actually also trying to create a similar web components based approach for an app, and found this host approach quite powerful. I wonder if this is something that has been considered and, if not, what were the issues you found with it?