<content> 插入点上的内容可编辑答案

【问题标题】：Content Editable on <content> insertion point<content> 插入点上的内容可编辑
【发布时间】：2015-11-02 20:46:48
【问题描述】：

我正在寻找创建一个自定义元素，它是 Shadow DOM 包装 contenteditable 内容，而不是它本身被分配 contenteditable。

我的第一次尝试是：

<template>
  <div contenteditable="true">
   <content></content>
  </div>
</template>

还有这个希望不大的尝试：

<template>
  <div>
   <content contenteditable="true"></content>
  </div>
</template>

但两者都没有成功。这甚至可能吗？我在 Shadow DOM 中制作 contenteditable 元素没有遇到任何问题，但目的是让该内容也反映在 Light DOM 中。

最后一点，我一直在 Polymer 中进行所有测试，我认为它不会改变任何东西，因为它在 Chrome 中使用本机 Shadow DOM，但也许这会产生影响。

谢谢！

【问题讨论】：

标签： html polymer contenteditable shadow-dom

【解决方案1】：

这是可能的。您只需在 ready 或 attached 回调中获取 light dom 子节点的引用，并将其 contentEditable 属性设置为 true。

这是一个例子：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <base href="http://polygit.org/polymer+:master/components/">
  <link rel="import" href="polymer/polymer.html">
</head>

<body>
  <dom-module id="my-element">
    <template>
      <style>
        :host {
          display: block;
          height: 100px;
          background-color: #cacaca;
        }
      </style>
      <content id="insertionPoint" select="*"></content>
    </template>
  </dom-module>

  <my-element>
    <div></div>
  </my-element>
  <script>
    (function() {
      Polymer({
        is: 'my-element',
        ready: function() {
          var el = Polymer.dom(this.$.insertionPoint).getDistributedNodes()[0];
          el.contentEditable = true;
          el.style.height = "100%";
        }
      });
    })();
  </script>
</body>

</html>

【讨论】：

谢谢！但这并不能完全解决我的问题，这意味着我无法拥有可以编辑的纯文本节点，例如<my-element>foo bar</my-element>，这对我来说是一个非常大的用例。
@Bede 文本节点不可编辑。如果这是你的情况，那么让自定义元素成为内容可编辑的元素。
@Bede 就是这么简单。
我试图避免直接在主机上设置 contenteditable。这是因为我希望它在 Shadow DOM 和 Polymer 的 Shady DOM 中都能工作，当它设置在 Shady DOM 上时，contenteditable 意味着即使是 Shady 元素也可以被操作