Polymer 2.0 API Upgrade CheatSheet

Before

Polymer.dom(this.root)

After

this.shadowRoot

---

Before

this.domHost

After

this.getRootNode().host

---

Before

this.$$('some-selector');

After

this.shadowRoot.querySelector('some-selector')

---

Before

Polymer.dom(this).getOwnerRoot()

After

this.getRootNode()

---

Before

Polymer.dom(event).localTarget

After

event.target

---

Before

Polymer.dom(event).path

After

event.composedPath()

---

Before

Polymer.dom(event).rootTarget

After

event.composedPath()[0]

---

Before

Polymer.dom(this).observeNodes(this._nodesChanged)

After

<link rel="import" href="/bower_components/polymer/lib/utils/flattened-nodes-observer.html">

this._observer = new Polymer.FlattenedNodesObserver(this, this._nodesChanged);
this._observer.disconnect();

---

Before

this.getComputedStyleValue()

After
For now, need to use custom ShadyCSS API when the polyfill is loaded:

if (window.ShadyCSS) {
  style = ShadyCSS.getComputedStyleValue(el, '--something');
} else {
  style = getComputedStyle(el).getPropertyValue('--something');
}

An issue exists at webcomponents/shadycss#83 to improve the fidelity of the polyfill by patching the native window.getComputedStyle to do the good thing without a conditional.

---

Before

this.getContentChildren

After
Just write the platform code that will do this: find the slot, get the assignedNodes, and filter down to just the elements (ignore comments & text nodes):

this.shadowRoot
  .querySelector('slot')
  .assignedNodes({flatten:true})
  .filter(n => n.nodeType === Node.ELEMENT_NODE)

---

Before

this.getEffectiveChildren

After
Use Polymer.FlattenedNodesObserver's getFlattenedNodes helper method, and filter them down to just the elements (ignore comments & text nodes):

<link rel="import" href="polymer/lib/utils/flattened-nodes-observer.html">

let effectiveChildren = Polymer.FlattenedNodesObserver.getFlattenedNodes(this)
  .filter(n => n.nodeType === Node.ELEMENT_NODE)

---

Before

this.getComputedStyleValue('--something');

After This inconvenience is known: webcomponents/shadycss#83

if (window.ShadyCSS) {
  style = ShadyCSS.getComputedStyleValue(this, '--something');
} else {
  style = getComputedStyle(this).getPropertyValue('--something');
}

---

Before

this.customStyle['--my-dynamic-property'] = 'red';
this.updateStyles();

After

this.updateStyles({'--my-dynamic-property': 'red'});

---

Before

this.async(function() { /* ... */}, 100);

After

setTimout(() => { /* ... */}, 100);

---

Before

this.fire('some-event');

After

// composed: true => bubble across the boundary between the shadow DOM and the regular DOM
this.dispatchEvent(new CustomEvent('some-event', { detail: {}, bubbles: true, composed: true }));

---

Before

this.mixin(target, source);

After

mixin(target, source) {
  for (var i in source) {
    target[i] = source[i];
  }
  return target;
}

// If copying enumerable and own properties is enough (option defaults for example)
Object.assign(target, ...sources)

---

Before

hostAttributes: {
  'tabindex': '0'
}

After

this._ensureAttribute('tabindex', '0');

---

Before

this.debounce('debouncerJob', function() {}, 100);

After

<link rel="import" href="bower_components/polymer/lib/utils/debounce.html">

this._debouncer = Polymer.Debouncer.debounce(this._debouncer,
    Polymer.Async.timeOut.after(250),
    () => { this.doSomething() });

---

Before

<link rel="import" href="polymer/polymer.html">

<button on-tap="handler">I react to a gesture event</button>

After

<link rel="import" href="polymer/polymer.html">
<link rel="import" href="polymer/lib/mixins/gesture-event-listeners.html">

class TestEvent extends Polymer.GestureEventListeners(Polymer.Element) {
  ...
  
  // To imperatively adding a listener
  addListener() {
    Polymer.Gestures.addListener(this, 'track', e => this.trackHandler(e));
  }
}