Re: [WICG/webcomponents] "open-stylable" Shadow Roots (#909)

> Seamless DOM composition that minimizes the need to consider styling.

in DCE it looks like:
```
<custom-element tag="hex-row">
    <template>
        <style>
            hex-grid {
                nav {
                    --hex-grid-size:6rem;
                    display: inline-flex;
                    padding-bottom: 0;
                    margin-right: 0;
                    section{ margin-right: 0.2rem;  height: var(--hex-grid-size);}
                    button:has([selected]){ background-color: #2d4554; color: burlywood; }
                }
            }
        </style>
        <xsl:for-each select="/datadom/payload/xhtml:*">
            <!-- sanitize blank spans -->
            <xsl:if test="local-name(.) != 'span' or normalize-space(.) != ''">
                <hex-grid>
                    <xsl:copy-of select="."/>
                </hex-grid>
            </xsl:if>
        </xsl:for-each>
    </template>
</custom-element>
```
The open styleable means the internal CSS can be modified as in `hex-grid { nav{...` but no styles leaking outside.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/909#issuecomment-1896833566
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/909/1896833566@github.com>