Closed blackfalcon closed 3 years ago
Note that you only need to reflect properties where the attribute is used for styling. I think this is all of them in the auro-alerts case, but that might not be true with other elements.
Note that you only need to reflect properties where the attribute is used for styling. I think this is all of them in the auro-alerts case, but that might not be true with other elements.
The issue is... when a style attribute is used for BOTH a Property within the scope of the element AND a styled attribute. E.g.
static get properties() {
return {
error: { type: Boolean },
};
}
:host([error]) {
.alert {
border-color: var(--auro-color-alert-error-on-light);
}
svg {
color: var(--auro-color-alert-error-on-light);
}
}
If the styled attribute is only for a CSS hook, then this is not needed. E.g. auro-loader
@gusnaughton reported an issue with auro-loader related to this. @gusnaughton can you elaborate as to the issue and how it was resolved?
Right... I always forget about the standalone attribute case.
You can see my PR for the auro-loader fix: https://github.com/AlaskaAirlines/auro-loader/pull/6. There were two issues
Describe the bug
In some frameworks, there appears to be an issue where the technique of using an attribute selector to theme a custom element is not reflected within the scope of the rendered element.
This issue and image are from @geoffrich
Expected behavior
The element should have the correct UI when used in Svelte.
Correction suggestion
The suggestion to address this issue is to add the following to all the defined properties within the scope of the element.