web-dev-qa-db-fra.com

Comment créer des balises personnalisées pour HTML

Je voudrais apprendre à créer des balises personnalisées pour HTML, avec des attributs et un comportement spéciaux. Si quelqu'un pouvait donner des conseils, je vous en serais très reconnaissant. 

htmltags
36
Aktheus

Un article intéressant et détaillé de HTML5Rocks.com explique comment utiliser des éléments personnalisés: Éléments personnalisés: définition de nouveaux éléments en HTML

Voici un extrait de l'article sur la façon de le faire.

Instanciation d'éléments

Les techniques courantes de création d'éléments s'appliquent toujours aux éléments personnalisés. Comme avec n'importe quel élément standard, ils peuvent être déclarés en HTML ou créés dans le DOM à l'aide de JavaScript .

Déclarez-les:

<x-foo></x-foo>

Créer un DOM dans JS:

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

Utilisez l'opérateur new:

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

Selon ce que vous entendez par "attributs et comportement spéciaux", vous pouvez "créer" des balises HTML personnalisées dès maintenant. Les éléments suivants apparaissent dans tous les navigateurs et fonctionnent même avec les différentes méthodes JavaScript:

<my-book data-pages="400" data-author="Nietzsche">The Wanderer and His Shadow</my-book>

Il ne faut garder que quelques éléments à l'esprit:

  1. _ {Césure! Les éléments personnalisés doivent comporter au moins un - tel que my-book ou app-menu ou header-title, etc. N'utilisez pas data-* car il est réservé à data-attributs.

  2. Tous les éléments personnalisés ont un affichage de inline par défaut. Vous pouvez toutefois changer cela avec CSS ou JavaScript.

  3. Internet Explorer ne reconnaît aucun de ces éléments sauf si vous les {premier} _ "créez" avec JavaScript:

    document.createElement('my-book');

Donc, vous devez le faire avant, vous pouvez les utiliser dans vos CSS, HTML ou JS.

28
sdleihssirhc

Tout ce que vous avez à faire est de définir css pour cette balise

exemple:

mytag {
font-weight: bold;
}

et maintenant le mytag est votre propre audacieux:

<mytag>This text is in bold</mytag>
12
tylerr147

Il existe maintenant une nouvelle spécification standard du W3C, appelée Éléments personnalisés de composant Web , qui permet aux développeurs de créer leurs propres éléments HTML personnalisés et de les enregistrer avec l’analyseur de navigateur. Mozilla a développé une bibliothèque, nommée X-Tag, qui permet de créer et de travailler avec des éléments personnalisés très facilement, consultez-la: X-Tags.org

6
csuwldcat

Vous pouvez créer des balises HTML personnalisées en procédant comme suit:

Étape 1- Enregistrez un nouvel élément. Les éléments personnalisés sont créés à l'aide de document.registerElement ():

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

Le second argument de registerElement est un objet facultatif qui décrit le prototype de l'élément.

Étape 2 - Instanciation des balises personnalisées Plusieurs façons de procéder:.

<x-foo></x-foo>

Créer un DOM dans JS:

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

Utilisez le nouvel opérateur:

var xFoo = new XFoo();

Étape 3 - Joindre l’élément nouvellement créé au document

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

Exemple complet:

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);
2
Anurag Ratna

Il existe également une version prise en charge UNIQUEMENT dans Chrome 54 et Opera.

Exemple:

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

Vous pouvez en apprendre plus à ce sujet ici

2
Felipe Alarcon

vous pouvez utiliser javascript: document.createElement('element')

0
Oliver Ni