this template enables svelte to be used with a shadow DOM
entry component and then sub component using the goodness of svelte.
This template has stealen inspiration (hacks) from https://github.com/redradix/svelte-custom-element-template thanks to https://github.com/MonkeyAndres
This template includes:
- typescript support out of the box
- sass support
- babel with a minimal configuration (cf. rollup.config.js)
Clone it with degit:
npx degit stefanonepa/svelte-component-ts my-new-component
cd my-new-component
yarn
yarn dev
- setup a style in the entry element
ShadowRoot.svelte
. ⚠️ Styles in the root component are not scoped by svelte, then choose carefully your selectors if you use some there⚠️ .
(from redradix/svelte-custom-element-template
☝️)
Building custom elements with Svelte is really easy but have a lot of limitations, is this template I'm trying to show the way I solve most of these limitations.
Svelte current limitations: