Contenteditable inside Polymer element

2
votes

I´m trying to make a custom polymer element be contenteditable. I´m a polymer newbie so I´m probably doing something stupid. I can create the element and it renders and reacts to events but it does not go into editable mode when clicked. Any ideas?

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

Example on codepen.io

1
polymercontenteditableweb-componentshadow-domcustom-element

1 Answers

3
votes

The elements declared within custom tag are considered part of the light DOM, and I'm guessing that, due to shadow boundaries, there is a problem with using contenteditable on them. You would need to reinsert the content nodes into the shadow root of your custom element to make this work.

Here is an example of how you can accomplish that:

Codepen

http://codepen.io/anon/pen/WbNWdw

Source

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