禁用阴影主导后，网页组件中的拖拽排序问题
这个bug/请求不仅针对StencilJS，也适用于Web Components和Shadow DOM。 Grapes 和 Web Components 有没有启用或跟踪事件以调节这些问题的最佳实践？ 我不太接触Web组件，如果你能创建一个可复现的演示（比如在底层用Web Components自定义组件），那会帮助我们调试并理解问题。
阅读下方完整回答 ↓问题
Version 16.10 你能重现演示中的bug吗？ [X] 是的 [ ] 不 预期的行为是什么？ GrapesJS 支持与未启用 Shadow DOM 的自定义 Web 组件的拖拽和排序交互。 描述一下那个虫子 你好，我们广泛使用 GrapesJS，并集成了许多自定义网页组件，这些组件是通过 [StencilJS]（https://stenciljs.com/） 项目生成的。我们遇到的一个问题是将元素拖入 Web 组件。不过，只有在 Shadow DOM 被禁用（“shadow： false”）时才会有问题。 启用暗影DOM：[无Bug] ![ShadowON]（https://user-images.githubusercontent.com/1368216/92161326-780fd100-edfe-11ea-9826-c697750011f5.gif） Shadow DOM 被禁用：[Bug] ![暗影关闭]（https://user-images.githubusercontent.com/1368216/92161332-7ba35800-edfe-11ea-9d40-55adc4bc3575.gif） 问题是，当你试图在 Web 组件中插入 HTML 元素时，Grapes 似乎无法理解 DOM / 节点的引用（假设如此），因此无法在内部插入。奇怪的是，如果你把任...
回答（3）
这个bug/请求不仅针对StencilJS，也适用于Web Components和Shadow DOM。 Grapes 和 Web Components 有没有启用或跟踪事件以调节这些问题的最佳实践？
我不太接触Web组件，如果你能创建一个可复现的演示（比如在底层用Web Components自定义组件），那会帮助我们调试并理解问题。
@artf当然，感谢你的快速回复。 我已经在这个Fiddle里导入了我自定义的网页组件库来演示问题：https://jsfiddle.net/jenter77/5btn2ao7/25/ ![小提琴分类]（https://user-images.githubusercontent.com/1368216/92647514-ff08f180-f2b5-11ea-8433-697820d85fe3.gif） 如果你参考我的公开仓库和示例“faux-grid-item”网页组件[这里]（https://github.com/jenter/jenter-stenciljs-starter/blob/m...
你好，Jason，我试着查看编辑器内部的情况，不太清楚“shadow”选项到底如何影响这个行为，但我看到的主要问题是动态的“<div class=”delayed--wrapper“>”元素。 基本上，编辑器（解析后）有这个组件结构 '''html <faux-grid-item> <p>你好</p> <p>你好</p> <p>你好</p> </faux-grid-item> 这种错位让排序器感到困惑，因为“div.delayed--wrapper”并未连接到任何组件。 事实上，要“假装”你预期的行为，你需要在模板中保留一个 div '''html <faux-grid-item> <div...
相关问答
通过相似的问题讨论继续研究。
问题 #3674
隐形网络组件
版本： 0.17.19 目前的行为是什么？ 新增的 webcomponent 是可见的： 在 grapesjs 容器内添加网页组件时，如果组件在 shadow DOM 中有元素，组件是空的。（如果不使用 shadow dom 创建组件，则没有问题。）在图层管理器中可以看到，但是...
问题 #4752
带有指针事件的组件：'all'（除封装器外）或可编辑组件可以拖拽并下放到自己身上。
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Chrome 107.0.5304.121（官方版本）（arm64）可复制演示链接 https://jsfiddle.net/artur_arseniev/aku70f5w描述一下那个虫子 如何复现这...
问题 #4506
拖拽模式下的拖拽块错误：绝对
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v103 可复制演示链接 https://stackblitz.com/edit/js-1xpo7b 描述一下那个虫子 如何复现这个漏洞？使用dragMode：绝对（设计师模式）从块...
问题 #4138
风格管理器中的意外行为
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ 版本 1.35.101 Chromium：98.0.4758.87（官方版本）（64位） ![填充声]（https://user-images.githubusercontent.com/979485...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选，助你更快交付。
正在加载付费插件推荐……
浏览插件分类
直接跳转到市场上的插件分类页面。