Как я могу получить доступ к нативным атрибутам HTML в stenciljs? И как заставить это появиться в документации?

Question

Веб-компоненты, созданные с помощью stenciljs, не расширяют 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() похоже на чтение из тега для компонента

@Prop({"reflectToAttr": true}) сохранит двустороннюю привязку и обновит оба тега - для компонента и компонент для тега

Важно знать, что вам не разрешено обновлять ваши @Prop переменные внутри компонента, пока вы специально не разрешите его с помощью свойства mutable. @Prop({"mutable": true})

Если вы хотите и то, и другое, используйте синтаксис, разделенный запятыми, например:

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

Для получения подробной информации, пожалуйста, перейдите сюда: https://stenciljs.com/docs/properties

Иногда я сталкивался с некоторыми проблемами, используянативные атрибуты, такие как "title", "focus" и т. д. Правильным способом было бы использовать "data" перед атрибутом вроде "data-title", "data-focus" и в компоненте @Prop() dataTitle, @Prop() dataFocus.

Но, честно говоря, мне не нравится, что разработчик, использующий веб-компоненты, должен изучить синтаксис, специфичный для веб-компонента, поэтому я все равно использую нативные атрибуты. Что иногда приводит к ошибкам, которые вы можете легко исправить. Но это будет тема для другого вопроса.

@ Update

Я только что понял, что в новых версиях StencilJS это просто @Prop({"reflect": true}), но идея все та же