Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use svelte inside a webcomponent (without having to compile all components as webcomponents) #6012

Closed
lseguin1337 opened this issue Feb 22, 2021 · 2 comments

Comments

@lseguin1337
Copy link

lseguin1337 commented Feb 22, 2021

Today if you want to use a svelte component inside a webcomponent it's mandatory to compile all yours components as a webcomponents as well. Because of this following code:

if (should_add_css) {
  body.push(b`
	function ${add_css}() {
		var style = @element("style");
		style.id = "${component.stylesheet.id}-style";
		style.textContent = "${styles}";
		@append(@_document.head, style); 
	}
`);
}

the issue by injecting the style element into the head is that: there is no way for the dev to bootstrap a svelte component into a web component (because the style will be not apply to it), sometime you don't want to expose all components as a web components.

What would be interesting to have is: the ability to specify the "head" element:

import App from './App.svelte';

new App({
   target: targetInsideAShadowElement,
   styleDestination: shadowRoot,
});

Or another solution would be to always inject the style at the root node of the current component:

const doc = element.getRootNode(); // this will return the document or the current shadowRoot
@append(doc.head || doc, style);

Today in our company we are not using svelte because of this issue, we have a large application using multiple frameworks (Angular, Vue, Stencil) All those app are exposed as web components. We are using the web component API to abstract all micro frontends technologies.

The main idea there is to be able to wrap a large svelte app inside a webcomponent, today it's mandatory for us to expose all svelte components as webcomponents :/ we are loosing the props typings and so on... It would be nice to have the ability to export only the root of the app as a web component or something like this. What do you think?

Other people are waiting this feature: https://dev.to/stefanonepa/svelte-app-wrapped-in-a-web-component-24ki 😌

@lseguin1337 lseguin1337 changed the title Use svelte inside a webcomponent Use svelte inside a webcomponent (without having to compile all components as webcomponents) Feb 22, 2021
@ivanhofer
Copy link
Contributor

hi @lseguin1337,

I created a PR that solves this issue:
#5870

Unfortunately, I am still waiting for a svelte-maintainer to check the implementation.

@Conduitry
Copy link
Member

Closing this as a duplicate of #5869.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants