Как изменить стандартные элементы HTML с помощью веб-компонентов?

Я читал, как вы можете создавать свои собственные веб-компоненты, которым можно назначать настраиваемые атрибуты и разметку, инкапсулированную внутри Shadow DOM. Но как изменить уже зарегистрированные стандартные HTML-элементы?

Я заметил, что Polymer сделал это, потому что вы можете добавлять такие атрибуты, как flex и layout, к стандартным элементам HTML.

<div horizontal layout>
    <div>Alpha</div>
    <div flex>Beta (flex)</div>
    <div>Gamma</div>
</div>

Я посмотрел, но я не могу найти ничего, что объясняет, как это сделать.


web-component polymer
person limitlessloop    schedule 15.11.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В случае атрибутов макета полимера это чисто css-хуки: https://github.com/Polymer/polymer/blob/master/layout.html. Я думаю, вы также просите о функциональности/украшении. Пользовательские элементы не имеют этого понятия, но вы можете создать элемент, в котором отсутствуют определенные вами настраиваемые атрибуты.

Например, core-header-panel знает, как работать с дочерними элементами, имеющими атрибут main:

<core-header-panel>
  ...
  <div main>Main content</div>
</core-header-panel>
person ebidel    schedule 15.11.2014
comment
Ну хорошо, так что Polymer даже не коснулся стандартных HTML-элементов. Они просто резервируют определенные имена атрибутов для стилевых крючков. Если бы я хотел изменить/добавить функциональность к стандартным элементам HTML, вы сказали бы, что единственный способ сделать это — вложить их в пользовательский элемент? - person limitlessloop; 15.11.2014
comment
Не обязательно. Вам просто нужно создать свое приложение, чтобы знать об этих атрибутах. Пользовательские элементы упрощают эту задачу, потому что логика может жить внутри компонента. Причина, по которой мы используем атрибуты для многих вещей в Polymer (вместо классов), заключается в том, что мы получаем обработчики наблюдения за свойствами (например, <prop>Changed) и стили... все в одном :) - person ebidel; 16.11.2014
comment
Хорошо, спасибо, я все еще читаю о веб-компонентах и ​​полимерах, поэтому я уверен, что после некоторой практики это будет иметь смысл. Спасибо. - person limitlessloop; 16.11.2014