如何访问stenciljs中的原生HTML属性?如何使其出现在文档中

Question

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

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

我得到的编译器错误：

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属性的值，则必须首先获得对host元素的引用。

@Element() host: HTMLElement;

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

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

Answer 2

@Prop()就像从标签读取组件

CCD_ 7将保持双向绑定并将both-标记更新为component&要标记的组件

重要的是要知道，不允许在组件内更新@Prop变量，除非您特别允许它具有可变属性。@Prop({"mutable": true})

如果你想要两者，只需使用逗号分隔的语法，如：

@Prop({"mutable": true, "reflectToAttr": true}) 

有关详细信息，请访问此处：https://stenciljs.com/docs/properties

我有时会在使用"title", "focus"等原生属性时遇到一些问题。正确的方法是在"data-title", "data-focus"等属性之前使用"data"，并在组件@Prop() dataTitle、@Prop() dataFocus中使用。

但老实说，我不喜欢使用web组件的开发人员必须学习特定于web组件的语法，所以我无论如何都使用原生属性。这有时会导致一些错误，您可以很容易地修复这些错误。但这将是另一个问题的主题。

@更新

我刚刚意识到，在较新的StencilJS版本中，它只是@Prop({"reflect": true})，但想法仍然是相同的