The web ponents made with stenciljs don't extend HTMLElement. How can I access the native attributes and use them in my ponent, say the title attribute? When I add @Prop() title and use it in my template an error is shown.

Adding @Prop() also makes the attributes visible in the generated documentation. How can I add the used or required native attributes to the generated documentation?

Compiler error I'm getting:

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.

The web ponents made with stenciljs don't extend HTMLElement. How can I access the native attributes and use them in my ponent, say the title attribute? When I add @Prop() title and use it in my template an error is shown.

Adding @Prop() also makes the attributes visible in the generated documentation. How can I add the used or required native attributes to the generated documentation?

Compiler error I'm getting:

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.

• javascript
• typescript
• web-ponent
• stenciljs

Share Improve this question Follow edited Nov 4, 2019 at 8:29 amouda asked Nov 1, 2019 at 15:12 amoudaamouda 44788 silver badges2020 bronze badges 3

• which error will be shown when you try to pile? – Christian Meyer Commented Nov 2, 2019 at 16:39
• Yes, you are not allowed to do so but you can pass them directly to the element via attributes or properties. You can pass your title directly without declaring it with the @Prop decorator. What exactly are you trying to achieve? – Michal Cumpl Commented Nov 4, 2019 at 13:42
• I want to read the title attribute and use it in my ponent. The title attribtue sets a hover text on an element usually, so in addition to the hover effect, I want to read the value of title inside of my ponent and view it. I know I can add a dataTitle attribute, but then I have to set the data-title and title separately. In some cases that's a better approach, but in other cases it's redundant. – amouda Commented Nov 4, 2019 at 14:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Yes, you are not allowed to do so but you can pass HTML attributes directly to the element without declaring them with the @Prop decorator. In your case, just pass title to your ponent.

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

Then, if you would like to read the value of your title attribute, you have to get the reference to the host element first.

@Element() host: HTMLElement;

Then, you can read it with your host element's getAttribute method, for instance:

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

@Prop() is like reading from tag to ponent

@Prop({"reflectToAttr": true}) will keep a two way binding and updates both - tag to ponent & ponent to tag

It's important to know that you are not allowed to update your @Prop variables inside the ponent until you specifically allow it with the mutable property. @Prop({"mutable": true})

If you want both just use ma seperated syntax like:

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

For details please go here: https://stenciljs./docs/properties

I faced sometimes some issues using the native attributes like "title", "focus" and so on. The correct way would be using "data" before the attribute like "data-title", "data-focus" and in the ponent @Prop() dataTitle, @Prop() dataFocus.

But to be honest i don't like that the developer using the web-ponents have to learn a web-ponent specific syntax so i use the native attributes anyway. Which results sometimes in some errors that you can fix easily. But this would be a topic for another question.

@Update

I just realized that in newer StencilJS versions is just @Prop({"reflect": true}) but the idea is still the same