Upgrade to Pro — share decks privately, control downloads, hide ads and more …

input I <3 you, but you're bringing me down

input I <3 you, but you're bringing me down

Browsers have had native DOM elements since the dawn of time, and yet any time you talk to web developers about it, everyone complains about them. Key events are bananas. The element is unpredictable and grumpy. Have you ever tried to fill in one of those credit card forms where you can’t figure out what format the phone number should be in? Yeah, that’s what we’re talking about. Forms? Forms are magic, and not in a good way. Web Components let you stand up to browsers and build your own DOM elements that work the way they should, and Polymer is a new library that makes it easier than ever to do this.

Video: https://vimeo.com/144980655

Monica Dinculescu

November 06, 2015
Tweet

More Decks by Monica Dinculescu

Other Decks in Programming

Transcript

  1. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman'; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">
  2. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman'; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">
  3. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman'; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">
  4. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman'; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">
  5. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman'; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">
  6. <a-batman name=“monica”></a-batman> var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function() {

    this.innerText = this.getAttribute(‘name') + ‘ is batman’; }; document.registerElement(‘a-batman', {prototype:proto}); <link rel=“import” href=“a-batman.html">
  7. <dom-module id='a-batman'> <template> <style> :host { color: red; } </style>

    <div>My name is <span>{{name}}</span></div> </template> </dom-module>
  8. <dom-module id='a-batman'> <template> <style> :host { color: red; } </style>

    <div>My name is <span>{{name}}</span></div> </template> </dom-module>
  9. <dom-module id='a-batman'> <template> <style> :host { color: red; } </style>

    <div>My name is <span>{{name}}</span></div> </template> </dom-module>
  10. <dom-module id='a-batman'> <template> <style> span { color: red; } </style>

    <div>My name is <span>{{name}}</span></div> </template> </dom-module>