Tag

<cwc-base-tag>

Custom Web Component, a simple tag you can style.

Style Variables

• css style variable --cwc-base-tag--background Background as a colour, image etc.
• css style variable --cwc-base-tag--border-radius Border radius as a single value or combination.
• css style variable --cwc-base-tag--color Colour of text inside component.
• css style variable --cwc-base-tag--font-size Font-size for text inside component.
• css style variable --cwc-base-tag--line-height Line-height for text inside component.
• css style variable --cwc-base-tag--padding Padding for inside of component.

Slots

• root Single root slot for content to place in the component.

Example

<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/base/index.js"></script>

<style>
	.example-xxx {
		--cwc-base-tag--background: red;
		--cwc-base-tag--color: white;
	}
</style>

<cwc-base-tag class="example-xxx">Some Text</cwc-base-tag>