Polymer 内部聚合物元件_Polymer_Contenteditable_Web Component_Shadow Dom_Custom Element

Polymer 内部聚合物元件

polymer

Polymer 内部聚合物元件,polymer,contenteditable,web-component,shadow-dom,custom-element,Polymer,Contenteditable,Web Component,Shadow Dom,Custom Element,我正在尝试使一个定制的聚合物元素内容可编辑。我是一个聚合物新手，所以我可能在做一些愚蠢的事情。我可以创建元素，它呈现并对事件做出反应，但单击时它不会进入可编辑模式。有什么想法吗 <polymer-element name="editable-h1"> <template> <h1 contenteditable="true"> <content></content> </h1> </

我正在尝试使一个定制的聚合物元素

内容可编辑

。我是一个聚合物新手，所以我可能在做一些愚蠢的事情。我可以创建元素，它呈现并对事件做出反应，但单击时它不会进入可编辑模式。有什么想法吗

<polymer-element name="editable-h1">
  <template>
    <h1 contenteditable="true">
      <content></content>
    </h1>
  </template>
</polymer-element>

自定义标记中声明的元素被视为light DOM的一部分，我猜想，由于阴影边界，在它们上使用

contenteditable

会有问题。您需要将内容节点重新插入到自定义元素的阴影根中，以使其正常工作

以下是一个如何实现这一目标的示例：

代码笔

来源


聚合物（'H-h1'{
就绪：函数（）{
var sroot=这个。$；
var nodes=sroot.mycontent.getDistributedNodes（）；
[]forEach.call（节点，函数（节点）{
sroot.editablepartion.appendChild（节点）；
});
},
模糊：函数（）{
console.log（'blur'）；
},
单击：函数（）{
console.log（'click'）；
},
焦点：功能（）{
console.log（'focus'）；
}
});
我是一个普通的标题
我是一名高级工程师
有一个很好的测量跨度

Sweet！效果很好。你知道这是预期的行为还是会改变吗？

<html>
<head> 
<link rel="import" href="http://www.polymer-project.org/components/platform/platform.js">
<link rel="import" href="http://www.polymer-project.org/components/core-tooltip/core-tooltip.html">

<polymer-element name="editable-h1">
  <script>
  Polymer('editable-h1', {
    ready: function() {
        var sroot = this.$;
        var nodes = sroot.mycontent.getDistributedNodes();
        [].forEach.call(nodes, function(node) {
            sroot.editableportion.appendChild(node);
        });
    },
    blur: function () {
      console.log('blur');
    },
    click: function () {
      console.log('click');
    },
    focus: function () {
      console.log('focus');
    }
  });
  </script>
  <template>
    <h1 contenteditable="true" on-click="{{click}}" on-blur="{{blur}}" on-focus={{focus}} id="editableportion">
    </h1>
    <content id="mycontent"></content>
  </template>
</polymer-element>

</head>
  <body>
    <h1 contenteditable="true">I´m a regular heading</h1>    
    <editable-h1>
      I'm an polymer enhanced heading
      <span>With a span for good measure</span>
    </editable-h1> 
  </body> 
</html>