Demonstrate CSS from docs leaking into notification component #416
Conversation
| @@ -0,0 +1,23 @@ | |||
| .toast { | |||
There was a problem hiding this comment.
In our case, the styling for .toast comes from Bootstrap which is used by the theme. The styling is not meant to be applied to RTD's notification web component, but it gets applied anyway because the web component code applies the class on the host <readthedocs-notification> component itself, which lives in the root <html> document and not the shadow DOM.
There was a problem hiding this comment.
I don't see the reason why it needs to apply these classes though?
Lines 170 to 174 in 6c86cb0
Perhaps it is intentional that you allow the component to be styled differently by changing the CSS classes that are applied on the host component. For example, allowing different variants simply by toggling the class names on the host (<readthedocs-notification>). If so, then you should use namespaced class names, because the host element lives within the root document (<html> element) and not the shadow document.
This means some CSS properties like opacity, display, position etc. can affect the component if there are existing styles for those classes. Or, you can try using something else with even less chance of clashing e.g. data attributes.
This applies to all the class names in :host(...) in https://github.com/readthedocs/addons/blob/main/src/notification.css.
laymonage
changed the title
Hopefully this should demo the issue in #413.
Screen.Recording.2024-10-30.at.19.28.44.mov