我正在尝试将自定义聚合物元素设为contenteditable。我是一个聚合物新手所以我可能做了一些愚蠢的事。我可以创建元素，它渲染并响应事件，但单击时不会进入可编辑模式。有什么想法吗？
<polymer-element name="editable-h1">
<template>
<h1 contenteditable="true">
<content></content>
</h1>
</template>
</polymer-element>
答案 0 :(得分：3)
自定义标记内声明的元素被认为是轻量级DOM的一部分，我猜测，由于阴影边界，在它们上使用contenteditable会出现问题。您需要将内容节点重新插入自定义元素的阴影根中才能使其正常工作。
以下是如何实现这一目标的示例：
http://codepen.io/anon/pen/WbNWdw
<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>