Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Demonstrate CSS from docs leaking into notification component #416

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Demonstrate CSS from docs leaking into notification component #416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions docs/_static/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
.toast {
Copy link
Author

@laymonage laymonage Oct 30, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Author

@laymonage laymonage Oct 30, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see the reason why it needs to apply these classes though?

addons/src/notification.js

Lines 170 to 174 in 6c86cb0

firstUpdated() {
// Add CSS classes to the element on ``firstUpdated`` because we need the
// HTML element to exist in the DOM before being able to add tag attributes.
this.className = this.className || "raised toast";
}

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.

animation-name: spin;
animation-duration: 500ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
opacity: 0.5;
font-weight: bold;
animation-name: spin;
position: fixed;
display: block;
top: 0;
right: 0;
}

@keyframes spin {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}
4 changes: 4 additions & 0 deletions docs/conf.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@
html_theme = 'furo'

html_context = {}
html_static_path = ["_static"]
html_css_files = [
'custom.css',
]

# NOTE: this should be done automatically by the theme,
# but for some reason it's not working as I expect.
Expand Down