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:

<script>
	export _customElementTagName_ = 'my-button';
</script>

<button>test</button>

import './Button.svelte';

Then add the loader to your webpack config. For example:

// webpack.config.js
module.exports = {
	module: {
		rules: [
			{
				test: /\.svelte$/,
				use: [
					{
						loader: 'svelte-custom-element-loader',
						options: {
							prefix: 'my',
						}
					},
					{
						loader: 'svelte-loader',
						options: {
							emitCss: true,
							hotReload: process.env.NODE_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