Skip to content

Isolate dev overlay from user CSS via Shadow DOM#89

Open
MavenRain wants to merge 1 commit intolamdera:lamdera-nextfrom
MavenRain:fix/shadow-dom-devbar
Open

Isolate dev overlay from user CSS via Shadow DOM#89
MavenRain wants to merge 1 commit intolamdera:lamdera-nextfrom
MavenRain:fix/shadow-dom-devbar

Conversation

@MavenRain
Copy link
Copy Markdown

This PR wraps the Lamdera devbar in a custom element that renders content inside a shadow root, preventing user stylesheets from leaking into the overlay (fixes #37). Elm's vdom patcher is kept working by proxying DOM methods (appendChild, childNodes, etc.) into the shadow container. Gracefully degrades to current behavior on browsers without custom element support.

Closes #37

  Wraps the Lamdera devbar in a <lamdera-devbar> custom element that
  renders content inside a shadow root, preventing user stylesheets
  from leaking into the overlay (fixes lamdera#37).  Elm's vdom patcher is
  kept working by proxying DOM methods (appendChild, childNodes, etc.)
  into the shadow container.  Gracefully degrades to current behavior
  on browsers without custom element support.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

CSS styles can leak into the Lamdera Live overlay

1 participant