1

在开始使用 Polymer 之前，我开始详细学习 Web 组件。

我正在研究一个简单的示例，以使用两个<button>和一个<input type="text">元素创建一个旋转按钮。

模板是：

<template id="tplSpinButton">
  <style type="text/css">
    .spin-button > * {
      display: inline;
      text-align: center;
      margin: 0;
      float: left;
    }
  </style>
  <div class="spin-button">
    <content select=".up-spin-button"></content>
    <content select=".display-spin-button"></content>
    <content select=".down-spin-button"></content>
  </div>
</template>

主机元素如下：

<article>
  <spin-button>
    <button class="up-spin-button">&#43;</button>
    <input class="display-spin-button" type="text" value="0" size="2"/>
    <button class="down-spin-button">&#45;</button>
  </spin-button>
</article>

和 JS 代码

var template = document.querySelector('#tplSpinButton');
var host = document.querySelector('article spin-button');
var articleShadowRoot = host.createShadowRoot();
articleShadowRoot.appendChild(document.importNode(template.content,true));

var counterBox = document.querySelector('.display-spin-button');
var upHandler = document.querySelector('.up-spin-button');
var downHandler = document.querySelector('.down-spin-button');
upHandler.addEventListener('click', function(e){
    var count = parseInt(counterBox.value);
    counterBox.value = count + 1;
}, false);

downHandler.addEventListener('click', function(e){
    var count = parseInt(counterBox.value);
    counterBox.value = count - 1;
}, false);

document.registerElement('spin-button', {
    prototype: Object.create(HTMLElement.prototype)
});

在实验过程中，我开始知道 JS/ 代码不能像<style>在影子 DOM 中那样工作。<template> 在上面的示例中，我添加了插入点 ( <content>)，然后将事件侦听器附加到分布式元素。

  • 有没有办法封装事件监听器的实现？
  • 有什么方法可以将控件和元素移动到 shadow dom，然后以任何方式附加事件侦听器？
4

1 回答 1

3

有没有办法封装事件监听器的实现？

您可以将其作为元素原型的一部分，并在生命周期回调中构建它。

有什么方法可以将控件和元素移动到 shadow dom，然后以任何方式附加事件侦听器？

使用getDistributedNodes选择投影到内容标签中的元素。

这是一个说明这两个概念的 jsbin 。希望有帮助！

于 2014-04-23T21:40:39.697 回答