Come creare tag personalizzati per html

Mi piacerebbe imparare come creare tag personalizzati per html, con attributi e comportamenti speciali, se qualcuno può dare consigli sarei il più grato.

C’è un articolo interessante e approfondito da HTML5Rocks.com su come lavorare con elementi personalizzati: Elementi personalizzati: definizione di nuovi elementi in HTML

Ecco un estratto dell’articolo su come farlo.

Elementi istanziati

Le tecniche comuni di creazione degli elementi si applicano ancora agli elementi personalizzati. Come con qualsiasi elemento standard, possono essere dichiarati in HTML o creati in DOM utilizzando JavaScript. Istanziazione di tag personalizzati

Dichiarale:

 

Crea DOM in JS:

 var xFoo = document.createElement('x-foo'); xFoo.addEventListener('click', function(e) { alert('Thanks!'); }); 

Utilizza il nuovo operatore:

 var xFoo = new XFoo(); document.body.appendChild(xFoo); 

A seconda di cosa intendi per “attributi e comportamenti speciali”, puoi “creare” tag HTML personalizzati al momento. Quanto segue si presenta in tutti i browser e funziona anche con i vari metodi JavaScript:

 The Wanderer and His Shadow 

Ci sono solo un paio di cose che devi tenere a mente:

  1. Sillabazione ! Gli elementi personalizzati devono essere costituiti almeno da un my-book o app-menu o header-title ecc. Semplicemente, non utilizzare data-* poiché è riservato per gli attributi dei dati .

  2. Tutti gli elementi personalizzati hanno una visualizzazione di inline per impostazione predefinita. Puoi comunque modificarlo con CSS o JavaScript.

  3. Internet Explorer non riconosce nessuno di questi elementi a meno che non vengano prima “creati” con JavaScript:

     document.createElement('my-book'); 

Quindi devi farlo prima di poterli usare nel tuo CSS, HTML o JS.

Tutto quello che devi fare è definire il css per quel tag

esempio:

 mytag { font-weight: bold; } 

e ora il mytag è il tuo stesso audace:

 This text is in bold 

Esiste ora una nuova specifica standard W3, denominata Web Component Custom Elements , che consente agli sviluppatori di creare i propri elementi HTML personalizzati e registrarli con il parser del browser. Mozilla ha sviluppato una libreria, denominata X-Tag, che semplifica enormemente il processo di creazione e utilizzo degli elementi personalizzati, verificando: X-Tags.org

C’è anche una versione che è supportata SOLO in Chrome 54 e Opera.

Esempio:

 class BasicElement extends HTMLElement { connectedCallback() { this.textContent = 'Just a basic custom element.'; } } customElements.define('basic-element', BasicElement); 

Puoi saperne di più su questo qui

Puoi creare tag html personalizzati con i seguenti passaggi:

Step 1- Registra un nuovo elemento. Gli elementi personalizzati sono creati usando document.registerElement ():

 var XFoo = document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype) }); 

Il secondo argomento in registerElement è un object facoltativo che descrive il prototipo dell’elemento.

Passaggio 2: istanza di tag personalizzati Diversi modi per farlo: dichiararli:

  

Crea DOM in JS:

 var xFoo = document.createElement('x-foo'); xFoo.addEventListener('click', function(e) { alert('Thanks!'); }); 

Utilizza il nuovo operatore:

 var xFoo = new XFoo(); 

Passaggio 3 Colbind l’elemento appena creato con il documento

 document.body.appendChild(new XFoo()); 

Esempio completo:

 var XFooProto = Object.create(HTMLElement.prototype); // 1. Give x-foo a foo() method. XFooProto.foo = function() { alert('foo() called'); }; // 2. Define a property read-only "bar". Object.defineProperty(XFooProto, "bar", {value: 5}); // 3. Register x-foo's definition. var XFoo = document.registerElement('x-foo', {prototype: XFooProto}); // 4. Instantiate an x-foo. var xfoo = document.createElement('x-foo'); // 5. Add it to the page. document.body.appendChild(xfoo); 

puoi usare javascript: document.createElement('element')