DART custom elements (Vanilla DART without Polymer) DART custom elements (Vanilla DART without Polymer) dart dart

DART custom elements (Vanilla DART without Polymer)


This is also used by Polymer. Polymer is just the combination of Custom Element, HTML Imports, Template, Polymer, Polyfills and some builerplate to connect these parts and provider a nice API.
If you want to reinvent the wheel you can go with CustomElement alone.

Change your main to

void main() {   document.registerElement('x-custom', CustomElement);   var elem = new Element.tag('x-element');   elem.appendText('x-element');   document.body.append(elem);   elem.onClick.listen((e) {     print('clicked');   });}

and you can react to click events


I was ableto write the below, which had been worked, feel I did it the long way,

  1. I could not use the tag
  2. Not sure if the way I used to callback the elements in the custumElement in the correct way, as I was forced to use .append for all the items, and not sure if there is an easier way to do it.

my index.html file is

    pick a color:<input type="color" name="colorname" id="colorname"> the color you  selected is: <output id="picked-color"></output> click it !    <div id='my-element'></div>

my index.dart file is:

import 'dart:html';class CustomElement extends HtmlElement {factory CustomElement() => new Element.tag('x-custom'); CustomElement.created() : super.created() {   }Element launchElement(Element o1){  o1.onClick.listen((e) => window.alert('the input color is: ${o1.text}')); print('CustomElement created!');var output = new Element.html('<div></div>');var statement = new Element.html('<div></div>');var bind = new Element.html('<div></div>')         ..text='this text will be dynamically replaced by what you are entering down';var input = new InputElement()           ..id ='input'           ..type ='text'           ..placeholder='enter data here';input.onInput.listen((e) => bind.text=input.value);var element = new Element.html('<span>content: </span>')          ..style.color='red';var button = new ButtonElement()  ..id = 'awesome'  ..classes.add('important')  ..onClick.listen((e) => pop(input.value))  // "Hi There!!!")  ..text = 'Click Me man!'  ..style.color='orange';      statement.innerHtml="<b>I'm an x-custom-with-markup!</b> ";      output.node..add(statement)..add(bind)..add(input)..add(element)..add(button);      return (output);  }var button1 = new ButtonElement()            ..id = 'awesome2'          ..text = 'External Click Me man!';void pop(i){ window.alert("input is: $i");  }}void main() {         document.registerElement('x-custom', CustomElement);          var xFoo = new Element.tag('x-custom');         InputElement colorname = querySelector('#colorname');         Element theColor = querySelector('#picked-color');         xFoo = xFoo.launchElement(theColor);         theColor.text = colorname.value;         Element myDiv=querySelector('#my-element');            myDiv.children.add(xFoo);         colorname.onInput.listen((Event e) {         theColor.text = colorname.value;       });   }