Style CPart: IsolateClass feature

[michaelpb]

Currently, the Style CPart will NOT scope either vanish or vanish-into-document. However, there is a possible use case for vanish-into-document being scoped: Basically, if you have multiple layouts in a single project, and you want completely different CSS for each layout, with no room for conflict.

Proposal: IsolateClass feature, in addition to, or even instead of prefixing by default (?)

<Style -isolate-class="my_super_unique_class">
   h3 { color: blue; }
</Style>

Would result in CSS like: .my_super_unique_class:has(h3) { color: blue; }

By default, IsolateClass will get set to the Component name, if the Component name is in anything but "regular" render mode.

• allowing more granular, unsurprising styling and for vanish-* and even shadow to still prefix

---

Def / configuration:

{
   class: '?', // defaults to "false" if mode=normal, otherwise "i__x-ComponentName" 
   renderClass: '?', // defaults to "false" if component mode=normal, otherwise "h1, a, p > whatever, .etc" (e.g. string of targeted elems)
   prefix: '?', // defaults to "false" if component mode!=normal, otherwise "x-ComponetnName" (e.g. string of targeted elems)
   setShadowRoot: null, // false, unless "shadow" is selected, then true
}

---

First shot at implementation: Loop through patches, getting checking if patch[0].matches && patch[0].matches(selector), then appending patch[0] to the end with a "attr-append" patch

    renderCallback(renderObj) {
        const className = this.attrs.isolateClass || '';// eg.. 'I__x__MyComponent';
        const patches = className ? renderObj.component.patches : [];
        const any = this.getAllClasses(); // e.g. 'h1, p > strong';
        for (const [ parent, method, node ]  of Array.from(patches)) {
            if ((method === 'insertBefore' || method === 'appendChild') && node.matches(any)) {
                patches.append('attr-append', node, 'class', ' .' + className);
            }
        }
    }

• Approach 2: Just loop through selectors, using querySelectorAll on each CSS selector to get all matching elems

---

[michaelpb]

Possibly more consistent options:

• vanish-into-document could turn into id, e.g. id=, that gets applied to body
• vanish could turn into a class, e.g. .x_MyClassName, that gets applied to ALL children (different behavior..?)
• For more consistency, vanish-into-document could use class as well

That way, ALL Style CParts will ALWAYS be prefixed (with the exception of shadow root components, which don't need it, since they have isolated styles anyway)

---

The mechanics could be as such:

• Could attach an id="FullNameOfComponent" to html or body or something, and then prefix #FullNameOfComponent for all CSS rules
• Would take 4-10 lines (depending on how it effects SSG builds)

Pros and cons:

• Pros: Use case seems good, makes "vanish-into-document" more like "normal" (and somewhat more like "shadow" in some cases) and probably make it easier to switch between modes and not have unintended side-effects
• Cons: It makes it less like "vanish", and also makes "vanish" more confusing since it will be the only non-prefixed one, and I'm not really sure how it could ever be prefixed

Questions:

• Should just be a "recipe", vs a core feature?
• Any way to implement this use-case more cleanly with existing tools? Maybe just show recipe for custom prefix on Style CPart..?

[michaelpb]

...