LitElement : comment connaître la largeur d'un élément ?

Question

Comment trouver la largeur d'un élément HTML dans Lit-Element, je ne trouve pas comment utiliser @query.

import { LitElement, html, query } from 'lit-element';

class MyElement extends LitElement {
  @query('#first')
  first;

  render() {
    return html`
      <div id="first">I want to know the size of this div</div>
      <div id="second">and set size to this div</div>
    `;
  }
}

Answer 1

Vous pouvez utiliser window.getComputedStyle() pour obtenir la largeur et toute autre propriété CSS de tout élément.

import { LitElement, html, query } from 'lit-element';

class MyElement extends LitElement {    
  render() {
    return html`
      <div id="first">I want to know the size of this div</div>
      <div id="second">and set size to this div</div>
    `;
  }

  updated() {
     const elem = this.shadowRoot.querySelector('#first');
     this._width = getComputedStyle(elem).getPropertyValue('width');
     console.log(this._width);
  }
}