CSS styles can leak into the Lamdera Live overlay

[edkelly303]

Quick Summary:
The <a> element in the overlay that links to the Lamdera docs can inherit styles from the app's CSS, as in this screenshot:

SSCCE

Here's the CSS that causes this, which is in public/styles.css in my repo:

a:not(nav *) {
    border-color: var(--acnt-07-bd);
    background-color: var(--acnt-03-el);
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    text-decoration: none;
    padding: 5px;
}

• Elm: 19.1 / Lamdera 1.3.2
• Browser: Firefox
• Operating System: Nixos

Additional Details

N/A

[lishaduck]

Declarative Shadow DOM is baseline now, so fixing this should be as simple as replacing the div with a <template shadowrootmode="open">.
I couldn't find where it's created, or else I'd PR it.

[lydell]

Note that Shadow DOM doesn’t prevent all styling – some can still leak in. I fixed this in elm-watch recently (where I’ve always used Shadow DOM).

lydell/elm-watch@17257a1

https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/

[supermario]

For whoever ends up looking at this, the devbar code is here: https://github.com/lamdera/compiler/blob/lamdera-next/extra/LocalDev/LocalDev.elm#L1237