LitElement如何找出元素的宽度答案

【问题标题】：LitElement how to find out width of an elementLitElement如何找出元素的宽度
【发布时间】：2021-02-12 00:30:30
【问题描述】：

如何在 Lit-Element 中找到 HTML 元素的宽度知道，我无法找到如何使用 @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>
    `;
  }
}

【问题讨论】：

@query 装饰器只能在 typescript 中使用，你在使用 typescript 吗？
const width = this.shadowRoot.querySelector('#first').clientWidth developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth

标签： javascript shadow-dom lit-element

【解决方案1】：

您可以使用window.getComputedStyle() 函数来获取任何元素的宽度和任何其他 CSS 属性。

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);
  }
}

【讨论】：