允许多个 Polymer 元素访问公共(public) Canvas 的最佳方式是什么？
<canvas id="myCanvas"></canvas>
<my-element canvas="myCanvas"></my-element>
在my-element内部执行document.getElementById({{myCanvas}}，然后开始绘制它。
这是最好的方法还是有更好的 MDV 类型方法？
我看到的问题是 Web 组件被封装，因此封装组件之间的标识字符串将无效。
最佳答案
你是对的，如果<canvas id="myCanvas"></canvas>位于另一个shadow dom子树中，document.getElementById('myCanvas')不会找到它。相反，您可以使用 document.querySelector('body /deep/ #myCanvas') ，但这很脆弱，只能找到第一个 #myCanvas影子树中的任何地方。
更好的方法是设置 .canvas外部属性:
<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)到 my-element 的 canvas已发布的属性(属性):
<canvas id="myCanvas"></canvas>
<my-element canvas="{{$.myCanvas}}"></my-element>
关于javascript - 使用 Polymer 元素渲染到通用 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23812518/