Search code examples
web-componentstenciljs

What is the right way to not use reserved public name withing web-component


When I run a build with stencil, I get

[Warn]
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.

I know it's only a warning but since it may cause unexpected runtime errors, I was wondering if some standard for naming it already existed. (since title was for me the more obvious propriety name to use).
If not, what would be the best practice?


Solution

  • As of today, the only workaround I found was to add attributes as property and pass all the information through this variable, like the following

    attributes: {
      title: string
      description: string
      /** ... */
    }
    

    I didn't found better than that.
    But I'm still open to any ideas