HTML+

Custom tags Style

When it comes time to style your custom tags, HTML+ allows you to associate custom style to your tags by specifying a static style property.

class SearchField {
	constructor(node, options) {
		this.node = node;
	}

	static style = `<style>
		.search-field {
			background: #eee;
			color: #222;
		}

		.search-field input {
			padding: 20px;
			border-radius: 20px;
		}
	</style>`;

	render() {
		return html(`
			<label class="search-field" aria-label="search field">
				<input type="search" name="search" placeholder="{placeholder}" value="{value}">
			</label>
		`, {
			value: this.node.getAttribute('value'),
			placeholder: this.node.getAttribute('placeholder') || 'Search...',
		});
	}
}

The style property must be a string with CSS wrapped inside the style tag. This will make it easier to edit CSS in your editor as well as give you control over how the style tag will show on the page.

You may also import your style using the importStyle utility function that not only imports your CSS, it also handles SASS, Less, and Stylus CSS.

const {importStyle} = require('@before-semicolon/html-plus');
const path = require('path');

class SearchField {
	...

	static get style() {
		return importStyle(path.join(__dirname, './search-field.scss'))
	};

	...
}

All tags styles are injected directly at the end of the head tag. This will make sure your tag styles load faster with the page without an extra file request from the browser. Styles are also injected in a way it will only target the tags inside your custom tag so you don't get CSS conflict.

Because the tag styles are the last ones and are placed directly in the header, they are hard to override based on CSS specificity. You can always use the tag name to target the html inside to override their style if needed.

.page search-field .search-field {
	background: #fff;
}