Add selector method for targetting a shadow DOM element from outside

[bob2517]

(This issue only refers to target selectors - not event selectors. This proposal will never happen for event selectors for multiple reasons to do with performance and over-complex coding workarounds.)

Currently, iframes can be gotten into by using iframe -> #element, etc. Only elements within an iframe are allowed inside an iframe unless iframes are not supported, so this works well.

Shadow DOMs, however, can be within an element but other elements can also be contained within the host alongside the shadow DOM. Only one shadow DOM is allowed per element. So we need an additional thing to specify that we specifically want to enter the shadow DOM to look for the target selector and not just look randomly outside it.

I need this because element.matches does not work as expected with the :host CSS selector and therefore breaks Active CSS selector rules for events. So as a workaround I need to have a resize event adding a class to the outer element inside of shadow DOM so I can have a different display, and more importantly events, on mobile than on desktop, and media queries are not specific to an element so I can't use those. The ResizeObserver API is overkill, as normal resize events when specifically added should actually be able to detect changes to element sizes. I'm not going to tamper with general resize events as it isn't my place to do so, as this issue will probably arise at some point on a browser level. But web components to be useful need to be able to have CSS added inside them based on the resize event somehow. This is important stuff. So I need a workable work-around.

I propose: acss-editor -> shadow -> #editorWrap

Proposal accepted! Doing this now.

[bob2517]

Done offline. Docs to do.

[bob2517]

Example code on how to add a class to an element in a shadow DOM from a window:resize event based on the width of the host element, the host element being acss-editor in this case:

window:if-max-width(acss-editor 800px):resize {
    acss-editor -> shadow -> #editorWrap {
        add-class: .small;
    }
}

window:if-min-width(acss-editor 801px):resize {
    acss-editor -> shadow -> #editorWrap {
        remove-class: .small;
    }
}

acss-editor is the component tag itself and is the host of the component shadow DOM, \\.

editorWrap is the wrapping div around everything else inside the shadow DOM, except the link tag for the stylesheet.

The alternative in native JavaScript would have been a lot more complex.

[bob2517]

Now on branch - closing.