svelte-custom-element-loader
auto register svelte component as custom element (not attach to shadow dom).
Getting Started
To begin, you'll need to install svelte-custom-element-loader
:
$ npm install svelte-custom-element-loader --save-dev
Import (or require
) the target file(s) in one of the bundle's files:
test
;
Then add the loader to your webpack
config. For example:
// webpack.config.jsmoduleexports = module: rules: test: /\.svelte$/ use: loader: 'svelte-custom-element-loader' options: prefix: 'my' loader: 'svelte-loader' options: emitCss: true hotReload: processenvNODE_ENV === 'development' ;
and then you can use <my-button></my-button>
Options
prefix
Type: String
Default: my
custom-element name prefix, only work with registerAllFile
is true
registerAllFile
Type: Boolean
Default: false
register all imported svelte file as custom element.
Slot
<my-container>
<div slot="a">dsad</div>
<div slot="b">dsad</div>
<div>default slot only have one Elment</div>
</my-container>
JSON attribute
Attribute name starts with json-
will auto parse to without prefix prop
<my-element json-data="{\"name\": \"value"}" />
// will pass JSON.parse(json-data) to data