Tworzenie własnych tagów HTML w JavaScript dziedziczących po natywnych tagach HTMLa (np. po tagu a)

pytanie zadane 5 kwietnia 2017 w JavaScript przez kamdu Nowicjusz (170 p.)

Czy da się utworzyć własny tag HTML w JavaScript dziedziczący po natywnym tagu HTMLa (np. po tagu a)? Jeśli tak, to jak?

komentarz 5 kwietnia 2017 przez ScriptyChris Mędrzec (190,190 p.)

W jakim celu chcesz utworzyć własny tag?

komentarz 5 kwietnia 2017 przez kamdu Nowicjusz (170 p.)

Chcę rozwinąć swojego frameworka do CSS, JS oraz HTML o własne tagi. Mam już pare stworzonych, ale one nie dziedziczą po natywnych tagach html. Potrzebuję zrobić też tagi działające tak jak np. tag a, ale żebym mógł je np. ostylować. Link do repo na GitHub https://github.com/Owlr/owl-rwd

3 odpowiedzi

odpowiedź 5 kwietnia 2017 przez Ivan Maniak (60,650 p.)

Pewnie, że można. W 2k17, w JS-ie wszystko jest możliwe :) tylko trzeba chcieć. Możesz dziedziczyć dodając prototype:

document.registerElement('button-big', {
  prototype: Object.create(HTMLElement.prototype) // To jest domyślny prototytpe, zawsze custom element dziedziczy po HTMLElement
});

W ES6 po prostu możesz użyć extends dla jakiejś klasy:

class EloElement extends HTMLElement {}

P.S. nie zapomnij o jakimś polyfill-u, bo z support-em jest... tak sobie :)

P.S. zanim nie jest za późno (projekt jest w fazie... niczego :) ) zainteresuj się custom elements v1

komentarz 6 kwietnia 2017 przez Comandeer Guru (600,810 p.)

W CE v1 tego nie da się praktycznie zrobić, bo Apple powiedziało "nie" i dziedziczenie po natywnych elementach jest zawieszone w próżni.

A wersji V0, czyli tej, o której piszesz, nie ma sensu używać, bo zaimplementował ją jedynie Chrome i jest przeznaczona do usunięcia w najbliższym czasie…