Как модифицирате стандартни 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
Добре, благодаря, все още чета за уеб компоненти и Polymer, така че съм сигурен, че ще има смисъл след известна практика. Благодаря. - person limitlessloop; 16.11.2014