To create a svelte component package or a web component package
- In
package.json
file changename
of your package (kebab-case string) - In
package.json
file changecomponentname
value 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-element
is the tag name of your web component - In
rollup.config.js
file setplugins > svelte > compilerOptions > customElement
totrue
- Import your component like
import 'your-package-name'
- Use your web component like
<custom-element></custom-element>
tag wherecustom-element
is the tag name you chose in step 1