GrapesJS 不支持 AdoptStylesheet

Question

版本： 你可以在控制台输入“grapesjs.version”获得版本 0.17.22 你能重现演示中的bug吗？[x] 是的[ ] 不 预期的行为是什么？ 应该能以类似 grapesjs 容器外的方式看到网页组件 详细描述那个漏洞 Grapesjs 无法从可构造样式表渲染 CSS。 目前的行为是什么？ 能够在不样式的情况下加载组件 你能附上截图、截屏或实时演示吗？**[x] 是的（https://codesandbox.io/embed/frosty-payne-3fhd7?fontsize=14&hidenavigation=1&theme=dark）[ ] 不 CodeSandbox 入门模板 https://codesandbox.io/embed/frosty-payne-3fhd7?fontsize=14&hidenavigation=1&theme=dark

artf · Accepted Answer

这个问题是由于 AdoptStylesheet 的工作方式，类似于 lit-element 的这个（https://github.com/lit/lit-element/issues/1139）。 基本上，你不能在多个文档中共享同一个CSSStyleSheet，所以必须手动重新创建，下面是一个自定义元素的代码，以支持adoptedStyleSheets。 “''js 编辑。Components.addType（'custom-element'， { isComponent： （el） => （el.tagName ||''）.includes（'-'） & window.customElements.get（el.tagName.toLowerCase（））， 浏览量：{ init（） { init时，元素仍然是主文档的一部分，所以 原始采用的样式表仍然存在 const shadowStyles = this.el？.shadowRoot？。adoptedStyleSheets; 如果（shadowStyles） { 通过使用 setTimeout，我们会在元素已经渲染完毕后跳到这一...

vasicvuk · Answer

有没有什么解决方案可以让lit-element components 3.X配合grapesJS使用？

ClaudeCode · Answer

谢谢你举报，@GaikwadShubham。 AdoptStylesheet 在 grapesJS 中不支持的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因 在报告中包含 GrapesJS 版本、浏览器和控制台错误

GrapesJS 不支持 AdoptStylesheet

问题

回答（3）

相关问答

通过自定义代码添加的CSS在移除自定义代码组件后依然存在

SetStyle/getCss（）生成重复的 CSS

葡萄的滑块按钮和标签键都没有按预期工作

将纯文本粘贴到文本组件中，会为粘贴的文本添加 <font /> 封装器

与此问题匹配的付费插件

浏览插件分类

问题