Vue Custom Element

This demo web page illustrates a few things:

• Two simple Vue Web Components below that require NO (frontend) build process. It's just 1 external JavaScript file that creates a (Vue) Web Component.
• Native Web Components also support attribute- and (named) slot data
• Web Components (when "closed") by default do NOT inherit or adhere to the CSS of their host page. Like an iFrame they have a closed scope.
• This web page uses CSS Custom Properties for its colors
• CSS Custom Properties DO natively propagate through to the Web Components that are on the web page
• This opens up a lot of possibilities for theming the Web Component

As you can see the HTML H2 heading elements are used both on this web page AND inside the two Vue Web Components below. The HTML H2 elements inside the Vue Web Component don't share / "receive" any styling from the used external CSS file.

Except for the CSS Custom Property that gives it color.

h2. Change color

The button below uses JavaScript to change the value of the CSS color Custom Property set in the external CSS file.

Toggle color between pink and purple

Inside the Vue Web Components below the CSS Custom Property (from the external CSS file) also colors the H2 headings.