Element Styles
Element styles are for specific styles that can’t be easily achieved with utility classes. This approach gives developers the convenience of colocating an element’s styles with its markup. These styles are also automatically scoped to the element in which they’re defined.
Locally scoped styling
Adding a <style> tag to your Single File Component’s HTML will scope those styles to that element. This is achieved by automatically hoisting those styles to the document’s <head>, with your custom element’s name inserted as an initial selector for each rule block.
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.
<style>
:host {
display: block;
background-color: RebeccaPurple;
transition: background-color 2s;
}
:host:hover {
background-color: PaleVioletRed;
}
::slotted(*) {
color: PapayaWhip;
}
</style>Custom properties
Custom properties generated by Enhance’s modular scales (as well as any custom properties declared in your configuration) can be used within element styles as well.
<style>
:host {
background: var(--my-custom-gradient);
font-size: var(--text1);
margin-block: var(--space4);
padding: var(--space3);
}
</style>Global styles
If you want to inject some global styles whenever your Enhance Element is used, you can use a style tag with the scope="global" attribute.
<style scope="global">
body {
overflow-y: hidden;
}
</style>