如何在Stenciljs中获取DOM元素？

Question

import { Component, Prop } from '@stencil/core';
@Component({
    tag: 'my-component',
    styleUrl: 'my-component.css',
    shadow: true
})
export class MyComponent {

  @Prop() first: string;
  @Prop() last: string;
  getElementHere() {
     // how can I get the div here?
  }
  render() {
    return (
      <div>
        Hello, World! I'm {this.first} {this.last}
      </div>
    );
  }
}

我希望像在原生JS中一样获取DOM元素。你怎么在Stencil做这个？ getElementById不起作用。

Answer 1

为了扩展Fernando的答案，@Element装饰器将组件的根元素绑定到此属性。重要的是要注意这种方法的一些属性：

1. @Element绑定属性仅在加载组件后才可用（componentDidLoad）。
2. 由于该元素是标准的HTMLElement，因此您可以使用标准的.querySelector(...)或.querySelectorAll(...)方法访问当前组件中的元素以检索和操作它们。

这是一个示例，显示何时可以访问该元素，以及如何操作此元素中的节点（从模板0.7.24起正确）：

import { Component, Element } from '@stencil/core';

@Component({
    tag: 'my-component'
})
export class MyComponent {

    @Element() private element: HTMLElement;
    private data: string[];

    constructor() {
        this.data = ['one', 'two', 'three', 'four'];
        console.log(this.element); // outputs undefined
    }

    // child elements will only exist once the component has finished loading
    componentDidLoad() {
        console.log(this.element); // outputs HTMLElement <my-component ...

        // loop over NodeList as per https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
        const list = this.element.querySelectorAll('li.my-list');
        [].forEach.call(list, li => li.style.color = 'red');
    }

    render() {
        return (
            <div class="my-component">
                <ul class="my-list">
                    { this.data.map(count => <li>{count}</li>)}
                </ul>
            </div>
        );
    }
}

Answer 2

您可以获取当前HTML元素，将其作为属性添加到您的组件中：

@Element() myElement: HTMLElement;

您可以阅读有关此here

的更多信息

希望这可以帮助你：）

Answer 3

From the official docs

在需要直接引用元素的情况下（例如通常使用document.querySelector时），可能需要在JSX中使用引用。

所以在您的情况下：

[value]="true" (boolean)