javascript - 如何访问 stenciljs 中的 native HTML 属性？以及如何让它出现在文档中？

Question

用 stenciljs 制作的网络组件不扩展 HTMLElement。我如何访问原生属性并在我的组件中使用它们，比如 title 属性？当我添加 @Prop() title 并在我的模板中使用它时，会显示错误。

添加 @Prop() 还可以使属性在生成的文档中可见。如何将已使用或需要的 native 属性添加到生成的文档中？

我得到的编译器错误:

The @Prop() name "title" is a reserved public name. Please rename the "title" prop so it does not conflict
with an existing standardized prototype member. Reusing prop names that are already defined on the element's
prototype may cause unexpected runtime errors or user-interface issues on various browsers, so it's best to
avoid them entirely.

Answer 1

是的，您不能这样做，但您可以将 HTML 属性直接传递给元素，而无需使用 @Prop 装饰器声明它们。在您的情况下，只需将 title 传递给您的组件。

<your-component title="test title"></your-component>

然后，如果您想读取 title 属性的值，则必须先获取对宿主元素的引用。

@Element() host: HTMLElement;

然后，您可以使用宿主元素的 getAttribute 方法读取它，例如:

componentDidLoad() {
  const title = this.host.getAttribute('title');
  console.log(title); // or do something with it
}