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代码中，我调用库中的函数来初始化图形。此函数调用需要canvas div的句柄（div为id =“graph_canvas”）。所以我通过这个。$。graph_canvas作为参数进行函数调用。但是库会引发一个异常，因为它期望div的本机版本，而是因为这个而得到一个包装的。$ .graph_canvas对应于div的包装版本。

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

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

任何帮助将不胜感激。

感谢。

Answer 1

如果您的图书馆没有架构问题，作为最后的手段，您可以在使用之前上传节点。请记住检查页面上是否存在Polyfill，否则下面的代码将在chrome上中断。

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

Native vs Polyfilled Shadow DOM

1 个答案: