Native vs Polyfill Shadow DOM

Question

我正在做一个项目，我正在使用 Polymer 和 Web 组件构建一个包含多个节点和边的图形。我正在使用一个由我的公司内部开发的底层库，它不基于 Web 组件。这个库包含用于创建节点、初始化图等的函数。我创建了一个名为 graph 的自定义元素，它将与库进行交互。以下是该元素的声明：

<polymer-element name="cmp-graph" attributes="canvas" constructor="CMPGraph">

<template>  
      <div id="graph_win_placeholder">
        <div id="graph_win" class="canvas">
            <div id="graph_canvas" class="graph-area">
            </div>
        </div>            
      </div>
</template>

</polymer-element>

在我的元素 Javascript 代码中，我调用库中的一个函数来初始化图形。此函数调用需要画布 div 的句柄（id="graph_canvas" 的 div）。所以我在进行函数调用时将 this.$.graph_canvas 作为参数传递。但是该库抛出一个异常，因为它期望 div 的本机版本，而是得到一个包装的，因为 this.$.graph_canvas 对应于 div 的包装版本。

我正在尝试不同的解决方案，并在加载我的应用程序时将 shadow=native 作为参数传递给查询字符串。

但现在的问题是，我的应用程序只能在 Chrome、Canary 和 Opera 上运行，因为其他浏览器没有对 Shadow DOM 的原生支持。有没有其他方法可以解决这个问题？

任何帮助将不胜感激。

谢谢。

Answer 1

如果您的库中没有架构问题，作为最后的手段，您可以 在使用之前向上包装节点。 记得检查页面上是否存在 Polyfill，否则下面的代码会在 chrome 上中断。

if(typeof ShadowDOMPolyFill !== undefined)
{
    var unwrappedNode = ShadowDOMPolyFill.unwrap(node);
}