Lightdom slots

[crisward]

This pull request also includes changes from #4330. This pull request simulates slots and named slots for web components without shadowdom. This works even if the slot has been inserted conditionally, ie it's surrounded by an {#if} ... {/if} though I will add tests to verify this later.

I'm using a mutation observer to update the slots, and grabbing the content just before the component is rendered. The functionality is added in the compiler so is only included if shadowdom is set to none. I'd like to omit it if slots are not present in the component, but I'm not clear how to detect this (appreciate any hints on this).

This feature helps svelte encapsulate some of the benefit of custom elements (ie just inserting a tag into a page) but without the downsides of shadowdom (auto complete issues, custom form element issues, etc).

Relates to issue #1748

Before submitting the PR, please make sure you do the following

• It's really useful if your PR relates to an outstanding issue, so please reference it in your PR, or create an explanatory one for discussion. In many cases features are absent for a reason.
• This message body should clearly illustrate what problems it solves. If there are related issues, remember to reference them.
• Ideally, include a test that fails without this PR but passes with it. PRs will only be merged once they pass CI. (Remember to npm run lint!)

Tests

• Run the tests tests with npm test or yarn test)

[ScottAwesome]

@crisward do you need help with the merge conflicts? This and your other light dom PR enable custom element support without shadow dom

I’m personally interested in seeing it land and been watching this (and typescript support which just landed) for some time

[crisward]

To be honest, I'd given up on this. The problem I was trying to solve was to be able create a svelte app, then wrap it in an outer shadow dom to give me css isolation.

Svelte at the moment only allows you to either use web-components all the way down, or mount a standard svelte app into the light dom.

I got around this by creating a web-component wrapper, that takes a normal svelte component as an argument. It even has support for named and default slots, also enabling the choice between shadow and light dom. The slot support relies on some non-public svelte apis, which may be a problem going forward.

I've very quickly uploaded this to github & npm

• https://www.npmjs.com/package/svelte-tag
• https://github.com/crisward/svelte-tag

I've extracted this for an internal app I've been working on. I still need to finish the readme and extract the tests. But hopefully it'll negate the need to modify svelte.

[ivanhofer]

@crisward if you want to use a svelte app inside an shadow dom for style encapsultion, you should checkout this PR: #5639.
Once this PR is merged you can use it like this to get a svelte app with style encapsulation:

const target = document.querySelector('#svelte-app')
const root = target.attachShadow({ mode: 'open' })

const app = new SvelteApp({
	target: root,
	customStyleTag: root,
})

Note: you need to build your app with thecss: true compiler-option

[milkbump]

If I understand your problem @crisward, You could always combine the exclude and include fields in your rollup/webpack build. Then use a different extension for web components (e.g .wc.svelte). The pattern is useful when you want different compilation settings for some components and not others (e.g Typescript, Web Components etc.).

// rollup.config.js

...
	plugins: [
		...
		// Regular Svelte components fed here
	    svelte({
            exclude: "**/*.wc.svelte",
        }),
		// Web Components will be fed here
        svelte({
            customElement: true,
            include: "**/*.wc.svelte",
        }),
		...
	]
...

You may also need to do something similar in your svelte.config.js so that your IDE's language server doesn't give you Custom Element warnings.

[stale]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.