javascript - 使用 Polymer 元素渲染到普通 Canvas

Question

允许多个 Polymer 元素访问公共(public) Canvas 的最佳方式是什么？

<canvas id="myCanvas"></canvas>
<my-element canvas="myCanvas"></my-element>

在 my-element 中执行 document.getElementById({{myCanvas}} 然后开始绘制它。

这是最好的方式还是有更好的 MDV 类型方式？

我看到的问题是 Web 组件被封装，因此封装组件之间的标识字符串将无效。

Answer 1

你是对的，如果<canvas id="myCanvas"></canvas>在另一个 shadow dom 子树中，document.getElementById('myCanvas')不会找到它。相反，您可以使用 document.querySelector('body /deep/ #myCanvas') ，但这很脆弱，只能找到第一个 #myCanvas阴影树中的任何位置。

更好的方法是设置 .canvas外面的属性(property):

<canvas id="myCanvas"></canvas>
<my-element></my-element>

document.addEventListener('polymer-ready', function() {
  document.querySelector('my-element').canvas = document.querySelector('#myCanvas');
});

我们通常做的另一件事是将元素包装在另一个 <polymer-element> 中。 .这将允许您将 Canvas DOM 元素数据绑定(bind)到我的元素的 canvas。发布的属性(attribute):

<canvas id="myCanvas"></canvas>
<my-element canvas="{{$.myCanvas}}"></my-element>