To create a svelte component package or a web component package
- In
package.jsonfile changenameof your package (kebab-case string) - In
package.jsonfile changecomponentnamevalue to your own component name (PascalCase string).
- Run
npm pack - Test your component in your Svelte app by installing it locally
npm i ./path/to/package/ - Import it in your app
import YourComponentName from 'your-package-name'
- Deploy your package to npm with
npm publish
- Add
<svelte:options tag="custom-element" />tag to your component wherecustom-elementis the tag name of your web component - In
rollup.config.jsfile setplugins > svelte > compilerOptions > customElementtotrue - Import your component like
import 'your-package-name' - Use your web component like
<custom-element></custom-element>tag wherecustom-elementis the tag name you chose in step 1