• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Aruba Cloud - Virtual Private Server VPS
+1 głos
878 wizyt
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

+2 głosów
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

2
komentarz 6 kwietnia 2017 przez Comandeer Guru (606,550 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…
+1 głos
odpowiedź 6 kwietnia 2017 przez Comandeer Guru (606,550 p.)

Jak już chcesz się tak bawić, to najprawdopodobniej będziesz zmuszony zrobić coś na kształt tagu my-link, który wewnątrz będzie miał Shadow DOM z tagiem a – po prostu.

0 głosów
odpowiedź 5 kwietnia 2017 przez kap Stary wyjadacz (11,620 p.)
Albo użyj np Reacta, zamiast wymyślać koło na nowo.
komentarz 6 kwietnia 2017 przez Comandeer Guru (606,550 p.)
A co ma React do tego tak prawdę mówiąc?
komentarz 6 kwietnia 2017 przez kubaapk Nałogowiec (44,270 p.)
No jak to co? Robisz sobie komponent i myk, masz autorski tag html. ( ͡° ͜ʖ ͡°)
komentarz 6 kwietnia 2017 przez Comandeer Guru (606,550 p.)
No nie… React komponenty rozwiązuje przecież na poziomie parsera i wynikowy HTML ich nie zawiera (correct me if I'm wrong).

Podobne pytania

0 głosów
1 odpowiedź 411 wizyt
pytanie zadane 13 marca 2017 w JavaScript przez VendE Użytkownik (980 p.)
0 głosów
0 odpowiedzi 129 wizyt
pytanie zadane 6 listopada 2022 w JavaScript przez Mefyra Nowicjusz (190 p.)
0 głosów
1 odpowiedź 394 wizyt
pytanie zadane 27 grudnia 2017 w HTML i CSS przez Rash Użytkownik (620 p.)

93,331 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,667 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...