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

Jump to bottom

[feat] automatically load lightdom stylesheets #1801

Open
bennypowers opened this issue Aug 29, 2024 · 3 comments · May be fixed by #2057
Open

[feat] automatically load lightdom stylesheets #1801

bennypowers opened this issue Aug 29, 2024 · 3 comments · May be fixed by #2057
Assignees
@bennypowers
Labels
feature New feature or request
Milestone
2025/Q1 — Cubone ...

Comments

@bennypowers
Copy link
Member

Description

Say a user forgot to load rh-table-lightdom.css in the document

  • or maybe they remembered, but they put an <rh-table> in another shadow root, but didn't load the lightdom styles in that shadow root.

Suggested solution

/** pseudocode */
async connectedCallback() {
  super.connectedCallback();
  const root = this.getRootNode();
  if (!root.getComputedStyle().getPropertyName(this._lightdomcssBrandName)) {
    root.adoptedStyleSheets = [...root.adoptedStyleSheets, await import('./rh-table-lightdom.css')]
  }
}

Screenshots

No response

Example API

No response

Additional context

No response
@bennypowers bennypowers added the feature New feature or request label Aug 29, 2024
@bennypowers bennypowers self-assigned this Aug 29, 2024
@bennypowers
Copy link
Member Author

probably best handled with a controller

@bennypowers bennypowers mentioned this issue Oct 27, 2024
Merged
@zeroedin
Copy link
Collaborator

Ok this will definitely shine light on the bifurcation between *-lightdom.css and *-lightdom-shim.css. Some older components like navigation-secondary will have to be revisited to split out CLS/FOUC driven lightdom styles from just deeply nested styles.

@bennypowers
Copy link
Member Author

note: if we place brand props like --_is-footer-css-loaded on the root, they'll inherit, and break shadow roots down the line

so we should use @property to make those not inherit, so they'll only apply to the current host / root. to disambiguate, our loading js might need to check the element's root and then maybe assign a --_is-footer-loaded-root and --_is-footer-loaded-host

@bennypowers bennypowers linked a pull request Nov 20, 2024 that will close this issue
feat: lightdom css controller #2057
Draft
@bennypowers bennypowers moved this from Backlog to In Progress 🟢 in Red Hat Design System Nov 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@bennypowers bennypowers

Labels
feature New feature or request
Projects
Red Hat Design System
Status: In Progress 🟢
Milestone
2025/Q1 — Cubone release
Development

Successfully merging a pull request may close this issue.

feat: lightdom css controller RedHat-UX/red-hat-design-system
2 participants
@zeroedin @bennypowers