Polymer: Is there a new $.element-id or $$['element-id'] in Polymer 2.0

[ralexrdz]

I was looking in documentation LocalDOM Basics and API for Polymer 1.0, second section Automatic Node Finding and looking for an alternative in Polymer 2.0 but couldn't find anything.

Any node specified in the element's template with an id is stored on the this.$ hash by id.

the $$ method provides a shorthand for Polymer.dom(this.root).querySelector():
this.$$(selector)
$$ returns the first node in the local DOM that matches selector.

Is it because I need to use new Shadow DOM v1 or something???
is there a new short-hand way to finding node inside elements ???

I was reading in Polymer 2 Docs API section Functions that this function I want are referenced

and id-based node finding into this.$.

my html looks like this:

<dom-module id="my-component">
<template>
<style>...</style>
<div id="myElement"></div>
...

class SertechMap extends Polymer.Element {
static get is() { return 'sertech-map'; }
static get properties() {
return {
map: {
type: Object
}
};
}
ready () {
<Code in next paragraphs>
}

I've tried this in JS getting this errors
let myElement = this.$.element-id error: Cannot read property 'element-id' of undefined
let myElement = this.$('element-id') this.$ is not a function
let myElement = this.$$['#element-id'] error: Cannot read property 'element-id' of undefined

gave up on $ and $$, then tried
let myElement = document.getElementById('element-id') console.log(my Element) => null
let mapElement = document.querySelector('#map') => null

Am I missing something this basic?!?!

Thanks

[ralexrdz]

It was very stupid error, but still don't understand why!

If ready () { ... } didn't have a super.ready() the hole Element died, with nothing from the <template> inside. What ever ready () function had inside is executed, but no DOM to access too

this.$ DOOO WORK!

[balrajrajkumar]

can you share the working code. i have the same issue

[jsilvermist]

@balrajrajkumar This issue is due to extending ready or similar methods without calling super.
For example, not calling super.ready() in ready.

[siengsotheara]

how about id with "-" in the middle of those component ? what should we do ?
<vaadin-text-area id="element-id" label="text area" ></vaadin-text-area>
this.$.element-id got an error

but if I renamed it to normal id name like element it's work!. Any idea please help!

[arthurevans]

Hi @siengsotheara. The $ is just a plain javascript object with IDs as keys. Since element-id isn't a valid JavaScript identifier, you can't use this.$.element-id, but you should be able to use this.$['element-id'].

(More on this subject if you're interested https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)

[siengsotheara]

Thanks @arthurevans It worked.