javascript - ¿Cómo puedo acceder a los atributos HTML nativos en stenciljs? ¿Y cómo hacer que aparezca en la documentación?

Los componentes web hechos con stenciljs no extienden HTMLElement. ¿Cómo puedo acceder a los atributos nativos y usarlos en mi componente, por ejemplo, el atributo title? Cuando añado @Prop() title y lo uso en mi plantilla, se muestra un error.

Agregar @Prop() también hace que los atributos sean visibles en la documentación generada. ¿Cómo puedo agregar los atributos nativos usados o requeridos a la documentación generada?

Error del compilador que estoy recibiendo:

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.

Respuesta #1

Sí, no se te permite hacerlo, pero puedes pasar atributos HTML directamente al elemento sin declararlos con el decorador @Prop. En tu caso, solo pasa title a tu componente.

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

Entonces, si desea leer el valor de su atributo title, primero debe obtener la referencia al elemento anfitrión.

@Element() host: HTMLElement;

Luego, puedes leerlo con el método getAttribute de tu elemento host, por ejemplo:

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

Respuesta #2

@Prop() es como leer de etiqueta a componente

@Prop({"reflectToAttr": true}) mantendrá un enlace bidireccional y actualizará ambos - tag al componente & componente al tag

Es importante saber que no se permite actualizar tus variables @Prop dentro del componente hasta que específicamente lo permitas con la propiedad mutable. @Prop({"mutable": true})

Si quieres ambos, simplemente usa la sintaxis separada por comas como:

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

Para más detalles, por favor vaya aquí: https://stenciljs.com/docs/properties

A veces enfrenté algunos problemas al usar los atributos nativos como "title", "focus" y así sucesivamente. La manera correcta sería usar "data" antes del atributo, como "data-title", "data-focus" y en el componente @Prop() dataTitle, @Prop() dataFocus.

Pero, para ser honesto, no me gusta que el desarrollador que usa los componentes web tenga que aprender una sintaxis específica de los componentes web, así que de todos modos uso los atributos nativos. Lo cual a veces resulta en algunos errores que se pueden arreglar fácilmente. Pero este sería un tema para otra pregunta.

@Actualizar

Acabo de darme cuenta de que en las versiones más recientes de StencilJS es solo @Prop({"reflect": true}), pero la idea sigue siendo la misma