Javascript 如何访问stenciljs中的本机HTML属性？以及如何使其出现在文档中？

使用stenciljs制作的web组件不扩展HtmleElement。如何访问本机属性并在组件中使用它们，例如

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.

@Prop（）

就像从标记读取组件一样

@Prop（{“reflectToAttr”：true}）

将保持双向绑定并同时更新-标记到组件和组件到标记

重要的是要知道，不允许更新组件中的

@Prop

变量，除非您特别允许使用可变属性

@Prop（{“可变”：true}）

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

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

详情请浏览：

我有时会遇到一些使用本机属性的问题，如

“title”、“focus”

等。正确的方法是在属性前面使用

“data”

，如

“data title”，“data focus”

，并在组件

@Prop（）dataTitle

，

@Prop（）dataFocus

中使用

但老实说，我不喜欢使用web组件的开发人员必须学习web组件特定的语法，所以我还是使用本机属性。这有时会导致一些您可以轻松修复的错误。但这将是另一个问题的主题

@更新

---

我刚刚意识到，在较新的StencilJS版本中，它只是

@Prop（{“reflect”：true}）

，但想法仍然是一样的是的，不允许这样做，但可以直接将HTML属性传递给元素，而无需使用

@Prop

装饰器声明它们。在您的情况下，只需将

title

传递给您的组件即可

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

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

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

---

尝试编译时将显示哪个错误？是的，不允许这样做，但可以通过属性或属性将它们直接传递给元素。您可以直接传递标题，而无需使用@Prop decorator声明标题。你到底想实现什么？我想阅读

title

属性并在我的组件中使用它。

title

attribtue通常在元素上设置悬停文本，因此除了悬停效果之外，我还想读取组件内部的

title

值并查看它。我知道我可以添加一个

dataTitle

属性，但是我必须分别设置

data title

和

title

。在某些情况下，这是一种更好的方法，但在其他情况下，这是多余的。我得到的错误是@Prop“title”是一个保留的公共名称。我在OP中添加了完整的错误。问题是我想使用本机属性，我还认为错误处理是我真正需要的。我相信在Chrome上使用@Prop“title”可以像预期的那样工作，但是错误消息会引起一些担心，担心将来与其他浏览器或移动设备的兼容性或问题。这是一个好消息！我以前用过，但完全忘了。。。这里要提到的一点是，在组件的生命周期结束时，它只会从title标记中读取一次。因此，没有双向绑定，可能需要使用更多或不同的挂钩。当然，这取决于应用程序

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