search

GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.36k stars 4.05k forks source link

BUG: Invisible webcomponents #3674

Closed sriya-srinivasan closed 3 years ago

sriya-srinivasan commented 3 years ago

Version: 0.17.19

What is the current behavior? That the added webcomponent is visible:

When adding web components inside grapesjs container, the component is empty/blank, if the component has elements in the shadow DOM. (If not using shadow dom to create components there is no issue.) It is visible in layer manager, but empty

Issue1

Here we can see the diffrence between the element inside and outside. The shadow root is not visible.

What is the expected behavior? The webcomponent inside grapesjs canvas needs to be rendered and look similar to the one outside, on top of the editor.

Are you able to attach screenshots, screencasts or a live demo?

Issue2

This is the error in the console.

artf commented 3 years ago

Hey @sriya-srinivasan can you create a reproducible demo, please?

artf commented 3 years ago

@sriya-srinivasan any update please?

sriya-srinivasan commented 3 years ago

Yeah Im trying but its proprietary code, so it'll take a while to create and include a similar component. But it is related to this issue. They are using a component created in plain JS, the one we are working on is using lit-element.

artf commented 3 years ago

Posted a workaround here https://github.com/artf/grapesjs/issues/3693

sriya-srinivasan commented 3 years ago

This is related to lit-element version update. Link to the issue here.

sriya-srinivasan commented 3 years ago

Here is the link to a reproducible demo.

GaikwadShubham commented 3 years ago

@artf do we need to reopen this issue?

artf commented 3 years ago

hey guys, from what I see, is more like an issue related to lit 3, which doesn't allow the reuse of web components across same-origin iframes, am I right? In that case, not being a user of the framework I'd ask you to let me know if there is anything I can do.

ps. being an issue with an external framework, I'd keep the issue closed

GaikwadShubham commented 3 years ago

Hi @artf , is there any way we can define the element in iframe as the author of lit had suggested

artf commented 3 years ago

@GaikwadShubham you might use canvas.scripts option to load external scripts in the iframe but as Web Components are supposed to work across same-origin iframes, I'm not sure is the right approach.