Search code examples
dartcontenteditabledart-polymer

Custom div element (polymer) doesn't listen to contentEditable="true"

I have the following code. The problem is that I can't edit the content of the div. The div does look like a contenteditable div, but it doesn't work like it. I can't actually edit any of the text. Did I make a mistake somewhere ?

<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="kp-test" extends="div">

<template>
Content
</template>

<script type="application/dart">
import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('kp-test')
class KPTest extends DivElement with Polymer, Observable{

  KPTest.created() : super.created() {
    polymerCreated();
  }

  attached() {
    super.attached();
    contentEditable = "true";
    style.color = "red";
  }
}
</script>
</polymer-element>
Solution

  • Alternatively you could insert a (wrapping it instead of extending it) instead of "Content".
    In this case you wouldn't need to extend the DIV (just create a custom element which doesn't extend any other element).