我正在尝试使自定义 polymer 元素内容可编辑。我是 polymer 新手，所以我可能做了一些愚蠢的事情。我可以创建该元素，它会呈现并对事件使用react，但单击时它不会进入可编辑模式。有什么想法吗？
<polymer-element name="editable-h1">
<template>
<h1 contenteditable="true">
<content></content>
</h1>
</template>
</polymer-element>
最佳答案
自定义标记中声明的元素被视为 light 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>
关于polymer - polymer 元素内的内容可编辑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26970999/