Declarative Adopted Stylesheets

index.html

<my-element>
  <template slot="styles">
    <style>
      /* CSS tweaks escape hatch */
      * {
        color: pink;
      }
    </style>
  </template>
</my-element>

my-element.js

import { adoptStyles, css, html, LitElement, unsafeCSS } from 'lit';

class MyElement extends LitElement {
  getAdoptedStyles() {
    const stylesTemplate = this.shadowRoot
      .querySelector('slot[name=styles]')
      .assignedNodes()[0];
    if (stylesTemplate) {
      try {
        const styles =
          stylesTemplate.content.querySelector('style').textContent;
        adoptStyles(this.shadowRoot, [
          ...this.constructor.styles,
          css`
            ${unsafeCSS(styles)}
          `,
        ]);
      } catch (e) {
        console.error(e.message);
      }
    }
  }
  
  ...
}