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

:defined CSS pseudo class does not work on shadow DOM elements #7988

Closed
billyvg opened this issue Apr 28, 2023 · 2 comments · Fixed by getsentry/rrweb#87
Closed

:defined CSS pseudo class does not work on shadow DOM elements #7988

billyvg opened this issue Apr 28, 2023 · 2 comments · Fixed by getsentry/rrweb#87
Assignees
@billyvg
Labels
Package: replay Issues related to the Sentry Replay SDK

Comments

@billyvg
Copy link
Member

billyvg commented Apr 28, 2023 •
edited
Loading

The CSS pseudo class :defined is not being applied to shadow DOM elements.

As an example if you use web components and have the following CSS:

:not(:defined) {
opacity: 0;
}

The web components will have opacity: 0 because they are not in the CustomElementsRegistry.
@billyvg billyvg added Status: Backlog Package: replay Issues related to the Sentry Replay SDK labels Apr 28, 2023
@mydea
Copy link
Member

mydea commented Apr 28, 2023

Hmm, should we move this issue to our rrweb fork, maybe? WDYT?

@billyvg
Copy link
Member Author

billyvg commented Apr 28, 2023

@mydea I wanted to add it here for visibility since users would end up in this repo

@billyvg billyvg mentioned this issue Apr 28, 2023
Merged
billyvg added a commit to getsentry/rrweb that referenced this issue Apr 28, 2023
@billyvg
feat(replay): Define custom elements (web components)
ed0133c 
Define custom elements so that we the `:defined` pseudo-class works as it can be used as a "loading" indicator while the web component is being loaded.

Fixes getsentry/sentry-javascript#7988
billyvg added a commit to getsentry/rrweb that referenced this issue Apr 28, 2023
@billyvg
feat(replay): Define custom elements (web components)
49eaad5 
Define custom elements so that we the `:defined` pseudo-class works as it can be used as a "loading" indicator while the web component is being loaded.

Fixes getsentry/sentry-javascript#7988
@billyvg billyvg self-assigned this May 2, 2023
billyvg added a commit to getsentry/rrweb that referenced this issue May 5, 2023
@billyvg
feat(replay): Define custom elements (web components) (#87)
7fb1eb8 
Define custom elements so that we the `:defined` pseudo-class works as
it can be used as a "loading" indicator while the web component is being
loaded.

Fixes getsentry/sentry-javascript#7988
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@billyvg billyvg

Labels
Package: replay Issues related to the Sentry Replay SDK
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(replay): Define custom elements (web components) getsentry/rrweb
2 participants
@billyvg @mydea