Static Component

In CWCO, a static component:

Will not be registered;
Will not be rendered;
Will be extended as a base component;

Let's say we want to create different button variations but want to minimize the work to avoid repetition and make it much easier to maintain the component. We can then do something like this.

class BaseButton extends WebComponent {
	static observedAttributes = [
		'label',
		'disabled',
		'type',
	];
	static delegatesFocus = true;

	get template() {
		return `
			<button class="btn" type="{type}" attr.disabled="disabled">
				<slot>{label}</slot>
			</button>
		`;
	}
	
	get stylesheet() {
		return `
			<style>
				:host {
					display: inline-block;
					pointer-events: [disabled ? 'none' : 'auto'];
					cursor: [disabled ? 'not-allowed' : 'pointer'];
					opacity: [disabled ? '0.5' : '1'];
				}
				
				:host * {
					box-sizing: border-box;
				}
				
				:host .btn {
					-webkit-appearance: none;
					-moz-appearance: none;
					appearance: none;
					outline: none;
					border: none;
					cursor: pointer;
				}
			</style>
		`
	}
}

With the base button we can then create any variations via inheritance.

Inheritance is just an alternative way create changes of a component. You can use compositions of components or wrapper components but inheritance is the one that gives you more control as it allows you to change anything about that component.

Extending Style

We can create now different variations of the component by changing the style.

class PrimaryButton extends BaseButton {
	get stylesheet() {
		return `
			${super.stylesheet}
			<style>
				:host .btn {
					background: black;
					color: white;
				}
			</style>
		`
	}
}

PrimaryButton.register()

In the above example we created a primary-button which is just the BaseButton with different background and color.

To extend a style, all you need is insert the super.stylesheet before your style. That will include the parent class stylesheet before your style declarations.

Extending is much easier if you use CSS objects for stylesheet as it allows you to pick individual style declarations or simply spread the style.

class PrimaryButton extends BaseButton {
	get stylesheet() {
		return {
			...super.stylesheet,
			':host' {
	      ...super.stylesheet[':host'],
				'.btn' {
					backgroundColor: 'black';
					color: 'white';
				}
			}
		};
	}
}

PrimaryButton.register()

Extending Observed Attributes

You may also need to support different observedAttributes for your new variation. You can reference the parent class ones when you try to create yours.

class LinkButton extends BaseButton {
	static observedAttributes = [
		...BaseButton.observedAttributes,
		'href',
		'target'
	];
}

LinkButton.register()

Extending Template

When extending the template you can either completely override it or wrap it in additional HTML.

Let's continue with the LinkButton example above to give it a new template that makes sense.

class LinkButton extends BaseButton {
	static observedAttributes = [
		...BaseButton.observedAttributes,
		'href',
		'target'
	];
	
	get template() {
		return `
			<a class="btn" href="{href}" attr.target="{target}, target">
					<slot>{label}</slot>
			</a>`
	}
}

LinkButton.register()