Custom Templates

Some components that render complex data (like <nostr-note>, for example) provide a default template that can be styled using part selectors, but also allow you to pass your own HTML template if you need a different hierarchy.

The template must be defined outside the component and then referenced by an id:

<template id="my-note">
  <div>
    <a part="author-link">
      <span part="author-name"></span>
    </a>
  </div>
  <div part="content"></div>
  <div>
    <a part="link">
      <time part="date"></time>
    </a>
  </div>
</template>

<nostr-note template="my-note" ref="nevent..."></nostr-note>