VueJS Web-component

Normal HTML

In the HTML-head of this static web page; there's a embedded style tag with some basic CSS. The CSS rules style the HTML button-tag with a 'gold' background-color.

Normal button

As you can see the web-component below also uses a HTML-button tag. But … that button is NOT styled according to the embedded CSS of this page.

Web-component

Inspect the web-component below using browser developer tools.

The block below is a Web-component. Originally a Vue component. The HTML, Css and JavaScripting is all contained inside the Web-component.

Web-component with attributes for button name and slot -data.

    <name-block button="Change username">
    Custom username
    </name-block>
                

Because this is a Web-component; this page's Css doesn't interfere width the Shadow DOM of the web-component. Above Web-component is used as the non-standard custom web-component tag above.