How to get child element by id ? about lit-element HOT 14 CLOSED

this.shadowRoot.getElementById('draw') should work

from lit-element.

I think, generally, it's better to use this._root as it accounts for shadydom, as well as shadowdom, also you can use this.renderComplete.then in your constructor to wait until the first render is complete.

class testElement extends LitElement {
  constructor() {
    super();
    this.renderComplete.then(()=>{
      console.log(this._root.querySelector('#draw'));
    })
  }
  _render() {
    return html`<canvas id="draw"></canvas>`;
  }  
}
	
customElements.define('test-element', testElement);

from lit-element.

Here is the full class:

class MyElement extends LitElement {

      _render() {
        return html`
            <canvas id="draw"></canvas>
        `;
      }

      _firstRendered() {
         console.log(this.shadowRoot); // log shadow root
         console.log(this.shadowRoot.getElementById('draw')); // log null
    }

}

If I understand the element life cycle, firstRendered is called after the element DOM is rendered for the first time. I run this on chrome 66.

from lit-element.

I think they should update the document :/ because when I use this.$('sampleID') it throw
'Uncaught TypeError: this.$ is not a function'

This was a Polymer-specific API that does not exist on lit-element. If you want to do this, execute querySelector on the shadowroot or this._root.

from lit-element.

I put the following inside _firstRendered but the result is null

_firstRendered() {
    console.log(this.shadowRoot); // log shadow root
    console.log(this.shadowRoot.getElementById('draw')); // log null
}

from lit-element.

When you call this function?

from lit-element.

I tried your code and it logged me <canvas> element as expected. Can you share the repro repository with your code?

from lit-element.

To reproduce, change the file src/components/my-view2.js in the PWA starter kit https://github.com/Polymer/pwa-starter-kit with the following lines:

import { html } from '@polymer/lit-element';
import { PageViewElement } from './page-view-element.js';
import { SharedStyles } from './shared-styles.js';
import { connect } from 'pwa-helpers/connect-mixin.js';
import './counter-element.js';

// This element is connected to the redux store.
import { store } from '../store.js';

// These are the actions needed by this element.
import { increment, decrement } from '../actions/counter.js';

// We are lazy loading its reducer.
import counter from '../reducers/counter.js';
store.addReducers({
  counter
});

class MyView2 extends connect(store)(PageViewElement) {
  _render(props) {
    return html`
      <canvas id="draw"></canvas>
    `;
  }

  static get properties() { return {
    // This is the data from the store.
    _clicks: Number,
    _value: Number
  }}

  _firstRendered() {
    console.log(this.shadowRoot.getElementById('draw'));
  }

  // This is called every time something is updated in the store.
  _stateChanged(state) {
    this._clicks = state.counter.clicks;
    this._value = state.counter.value;
  }
}

window.customElements.define('my-view2', MyView2);

I suspect the problem is the lazy loading mechanism in the starter kit.

from lit-element.

Just read the documentation again, maybe I should use didRender instead ?

from lit-element.

Reading through the implementation, _firstRendered is called only after creating the root. This means that no DOM is yet available. However, it is documented as is this would be the case. Therefore, I think this is a bug and the callback timing of _firstRendered is wrong.

from lit-element.

@jrabary Looks like it is a bug of pwa-starter-kit. For some reason it calls _render after the _firstRendered (maybe kinda of an asyncronous issue). lit-element on the bare project works as expected: calls _render before the _firstRendered.

from lit-element.

@Lodin getting the child inside _didRender(props, changedProps, prevProps) seems to be the workaround. Maybe it's the expected behavior.

from lit-element.

@jrabary I suppose, _didRender is kinda different thing. It catches every render, not the first one, so the whole logic is compromised. I suggest you to open issue at pwa-starter-kit, because it looks definitely as a bug.

from lit-element.

@Link2Twenty thanks

I think they should update the document :/ because when I use this.$('sampleID') it throw
'Uncaught TypeError: this.$ is not a function'

Use a native shadow DOM selector like this.shadowRoot or this._root works fine.

from lit-element.