javascript - 使用 polyfill 可以在多大程度上模拟 Shadow DOM？

Question

Shadow DOM W3C 草案能否通过提供用于搜索和遍历 DOM 的自定义函数在 JavaScript 中进行 polyfill？这已经完成了吗？我发现的尝试是相当温和的垫片，并且似乎没有做出太多努力来模仿规范。

我很感激这不是一件容易的事，但肯定有人仔细考虑过吗？

Answer 1

在过去的几个月里，我一直在研究这个确切的问题。

底线有一个适用于常青浏览器的polyfill https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs

^ 像 @host 这样的 CSS 功能的 polyfill 还没有，即将推出

所以，是的，polyfill 是一件很难的事情，特别是因为我们必须发明二级 DOM 树。我们试图使其尽可能用户友好，这需要使用相当侵入性的包装技术。

换句话说，如果你div = document.createElement('div')，你会得到一个看起来像 DIV 并且工作起来像 DIV 的东西，但实际上是一个 Wrapper 对象。当然，最终目标是让您的代码无论是在 polyfill 下还是在本机实现下运行，看起来都一样。

它不是 100% 防弹的。特别是我们不可能为document你包装，所以你必须自己做，有点像这样：

wrap(document).querySelector(...)

除了document问题之外，包装器旨在透明地工作。这是全新的，所以我为缺乏文档道歉。我们正在努力解决这个问题。

如果您有任何疑问或问题，请提出问题，我们乐于获得反馈。还有一个电子邮件频道用于讨论这个 polyfill（以及该组织中的其他 polyfill），地址为 polymer-dev@googlegroups.com。

我怀疑这些东西是否被广泛实施

没错，但至少在 Chrome 中。