Installation

DISCLAIMER: This library is exclusively for use by DSA members and allies. Content included but not limited to the DSA logo and color palette information may only be used for official DSA business.

npm i @dsa-ui/wc

Using these components

• Script tag

  • Put a script tag similar to this <script type='module' src='https://unpkg.com/@dsa-ui/[email protected]/dist/my-component.esm.js'></script> in the head of your index.html
  • Then you can use the library anywhere in your template, JSX, html etc

• Node Modules

  • Run npm i @dsa-ui/wc
  • Put a script tag similar to this <script type='module' src='node_modules/@dsa-ui/wc/dist/my-component.esm.js'></script> in the head of your index.html
  • OR, add an import statement within the root component of your application

  import { defineCustomElements } from '@dsa-ui/wc';
  defineCustomElements();

  • OR, add an import for any individual component

  import { HelloWorld } from 'my-library/dist/components/hello-world';
  customElements.define('hello-world', HelloWorld);

  • Then you can use the element anywhere in your template, JSX, html etc

More strategies and use cases can be found within the Stencil docs