Styling

By default, Symbiote-components are don't have a Shadow DOM enabled, so they could be styled classic way, with the convenient selectors based on custom tag names:

my-tag {
  color: red;
}
my-tag > .heading {
  font-size: 2em;
}

It's recommended to use only one top level shadow root (wrapper) for your application, if you planning to create some kind of embeddable solution:

class MyWrapper extends BaseComponent {}

MyWrapper.template = /*html*/ `
  <h2>Heading...</h2>
  <my-tag></my-tag>
`;

// This will enable Shadow DOM and connect styles for it:
MyWrapper.shadowStyles = /*css*/ `
  :host {
    color: blue;
  }
  my-tag {
    color: red;
  }
`;

Note that in this case, render function will be called asynchronously. It caused by connecting styles via Blob URL and we should wait a bit for a resource loading even if nothing is loaded from the network.

For the Content Security Policy (CSP) support, in that case, you should add the blob: source to your settings.

If you don't use CSP settings and don't care about style element repeating in component instances, you can use simple inline styles for the shadow root in your template:

class MyWrapper extends BaseComponent {
  // Don't forget to enable Shadow DOM manually:
  renderShadow = true;
}

MyWrapper.template = /*html*/ `
  <style>
    :host {
      color: blue;
    }
    my-tag {
      color: red;
    }
  </style>
  <h2>Heading...</h2>
  <my-tag></my-tag>
`;

More information about Shadow DOM styling and it's selectors, you can find here.

Root styling

Root styles setting allow you to add styles to the component's subtree root. Root element will found automatically, it could be parent Shadow DOM or Document itself.

class MyComponent extends BaseComponent {}

MyComponent.template = /*html*/ `
  <h2>Heading...</h2>
  <my-tag></my-tag>
`;

MyComponent.rootStyles = /*css*/ `
  my-component > h2 {
    color: blue;
  }
  my-component > my-tag {
    color: red;
  }
`;

MyComponent.reg('my-component');