You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
Or another solution would be to always inject the style at the root node of the current component:
constdoc=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?
The text was updated successfully, but these errors were encountered:
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
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:
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:
Or another solution would be to always inject the style at the root node of the current component:
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 😌
The text was updated successfully, but these errors were encountered: