CSS variables are applied at root (HTML) scope

[TheFoot]

The CSS vars used by the component:

<style lang="scss">
:root {
	--color-highlight: 55, 114, 255;
	--color-highlight-faded: 215, 227, 255;
	--color-active: 150, 5, 5;
	--color-black: 0, 0, 0;
	--color-white: 255, 255, 255;
	--color-lightgrey: 240, 240, 240;
	--color-darkgrey: 76, 76, 76;
}
</style>

.. are applied to the host application, however - they aren't named with any reference to VDG - so there is potential for a clash.

Including them in a scoped doesn't work at all - not even withing local component development, hence why they exist in a globally scoped block atm.

Hopefully Vue will include support soon for a :host selector - to be applied to the component root: vuejs/vue-loader#1601

[TheFoot]

Option 1
Wait for :host support.

Option 2
Try using a :style binding on the component root element. This would mean no integration-side work needed. Could even be a prop to allow overriding of the component theme!

Option 2 sounds better methinks.. 🤔