1. STYLE tag css rules are scoped within element

Green button borders should not be applied to external button 

        <custom-element>
            <template><!-- template needed to avoid styles leaking into global HTML -->
                <style>
                    button{ border: 0.2rem dashed green; }
                </style>
                <button>Green dashed border</button>
            </template>
        </custom-element>
        <button>Default border</button>

2. DCE with tag

Blue borders only within 2 DCE instances

        <custom-element tag="dce-1">
            <template><!-- template needed to avoid styles leaking into global HTML -->
                <style>
                    button{ border: 0.2rem dotted blue; }
                </style>
                <button><slot>Blue borders</slot></button>
            </template>
        </custom-element>
        <button>Default border</button>
        <dce-1>1st</dce-1>
        <dce-1>2nd</dce-1>

3. Override style in DCE payload

Red borders only for last DCE instance

        <custom-element tag="dce-2">
            <template><!-- template needed to avoid styles leaking into global HTML -->
                <style>
                    button{ border: 0.2rem dashed blue; }
                </style>
                <button><slot>Blue borders</slot></button>
            </template>
        </custom-element>
        <button>Default border</button>
        <dce-2>1st</dce-2>
        <dce-2>
            <template> <!-- template needed to avoid styles leaking into global HTML -->
                <style>button{border-color:red;}</style>
                Red border
                <b>2</b>
                3
                <b>4</b>
            </template>
        </dce-2>

4. simple internal override

green label with blue text button 

        <custom-element>
            <template>
                <style>
                    color:green;
                    b{ color: blue;}
                    input:checked+b{ color: darkblue; text-shadow: 0 0 4px springgreen;}
                </style>
                <label>
                    green
                    <input type="checkbox" value="Glowing Blue" checked=""><b>blue</b>
                </label>
            </template>
        </custom-element>

5. External template( inline lib )

green label with blue text button 

        <template id="template-5">
            <style>
                color:green;
                i{ color: blue;}
            </style>
            <p>
                green
                <i>blue</i>
            </p>
        </template>
        <custom-element src="#template-5"></custom-element>

green blue

6. External template( ext lib )

Grid with 8 hex shaped buttons with text and icon 

        <a href="hex-grid-dce.html">hex-grid-dce.html</a>
        <custom-element src="hex-grid-dce.html#hex-grid-template">
            <template>
                <style>nav{--hex-grid-size: 5rem; margin-left:2rem; }</style>
                <img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element">
                <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/">
                <img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/">
                <img src="https://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery">
                <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/">
                <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/">
                <img src="https://lit.dev/images/logo.svg#flame" alt="Lit">
                <img src="https://redux.js.org/img/redux.svg" alt="Redux">
            </template>
        </custom-element>
hex-grid-dce.html