Styling Templates
Since client-side templates are Web Components, their content is inside the shadow DOM. By design, the shadow DOM defines a local style scope that’s isolated from global styles. See Style Scopes for more information.
You can add component-specific scoped styles directly in the static styles
template property.
import { css, html, LitElement } from 'lit';
class MyView extends LitElement {
static get styles() {
return css`
:host {
/* Styles for the <my-view> host element */
display: block;
}
.my-view-title {
font-weight: bold;
border-bottom: 1px solid gray;
}
`;
}
render() {
return html`
<h2 class="my-view-title">My view title</h2>
`;
}
}
customElements.define('my-view', MyView);
42AE001F-6D1F-456E-B072-27B883C19920