Element styles
Element styles are for specific styles that can’t easily be achieved with utility classes. This approach gives developers the convenience of writing style rules right next to the elements those rules affect.
Local, Scoped Styling
Adding a <style> tag to your single-file element definition’s HTML will be scoped to that element when it is automatically hoisted to the document’s <head>.
export default function MyHeader({ html }) {
return html`
<style>
h1 { color: Crimson; }
</style>
<h1>My Web App</h1>
`
}Authoring the above <my-header> element will result in the following CSS in your document’s inline stylesheet:
<head>
<!-- ... -->
<style>
my-header h1 { color: Crimson; }
</style>
</head>Element Pseudo classes
Enhance projects come preconfigured with a styling system that lets you use pseudo classes like :host and ::slotted().
These pseudo classes give you the ability to style the outer Custom Element tag as well as slotted elements.
This enables you to write scoped styles co-located inside your single-file component.
<style>
:host {
display: block;
background-color: #0071FC;
transition: background-color 2s;
}
:host:hover {
background-color: #0071FC;
}
::slotted(*) {
color: #7327CE;
}
</style>