Question

我正在寻找创建一个自定义元素，即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，但也许这会产生影响。

谢谢！

Answer 1

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

以下是一个例子：

＆＃13;

<!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>

＆＃13;

内容可在<content>插入点

1 个答案: