How (and why) to use shadow DOM, now that the declarative syntax is here.

https://www.youtube.com/watch?v=8Z8H2NEbLtE

shadow DOM has lower precedence than regular styles

(X, Y, Z)
#id, classes and attrs, elements

[id="myid"] is (0,1,0) not (1,0,0)!

You can duplicate classes to increase specificity! (0, 4, 0)
.button.button.button.button
or
.button {
&&& {
}
}

is( .button, #hammertime )
.button:not(#id1#id2) -> "impossible" because two IDs, (2, 0, 0)!

Decreasing specificity

:where( .button) -> (0,0,0)

** Very useful for css reset!
input:where([type="checkbox"])

17:55 - meta keyword in sass

** Might need to use !important in layers (dialog: display:none)