Custom Components

Writing a Custom Component

All built-in components in Canary are Web Components written with Lit.

We have controllers that are reused across components, and contexts that are used to share data from parent to child components.

Using Controllers

Information can be found in Lit's docs.

Using Contexts

Information can be found in Lit's docs.

Using a Custom Component

You can use slot to insert your custom component.

<canary-modal>
  <canary-trigger-searchbar slot="trigger"></canary-trigger-searchbar> // [!code
  --]
  <div slot="trigger"><MyCustomComponent /></div>

  <canary-content slot="content">
    <!-- Rest of the code -->
  </canary-content>
</canary-modal>

For real-world example of above case, take a look at CloudSearch.vue.