“This is the third day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

Custom Element

Custom Web elements, called Custom Elements, can be used when the HTML predefined web elements do not meet the requirements.

The characteristics of

  1. The tag name of a custom web element must contain one or more hyphens (-). This is because the browser’s built-in HTML element tag names do not contain a hyphen, which can be effectively distinguished.
  1. Support for rewriting prototypes and apis to allow custom elements to have special attributes, methods, and callbacks. Ordinary HTML elements, his prototype is HTMLELement.prototype, the custom element can customize the prototype, mount various methods on the prototype, has achieved the purpose of easy use.

document.registerElement()

  1. Before you can use a custom element, you must register it with the registerElement method of the Document object. This method returns a constructor for a custom element.
var SuperButton = document.registerElement('super-button');
document.body.appendChild(new SuperButton());
Copy the code

We find that the custom element is actually a constructor that returns the defined element node to be added to the page.

  1. registerElement(eleName,eleProtoype)Takes two parameters, the first is the element name and the second is the prototype of the element.
var MyElement = document.registerElement('user-profile', {
  prototype: Object.create(HTMLElement.prototype)
});
Copy the code

Htmlelement. prototype is the prototype of all Element nodes in the browser. The biggest advantages of custom elements are the ability to customize the API, define new properties and methods, and register callback functions.

Create custom elements with special stereotypes

var buttonProto = Object.create(HTMLElement.prototype); buttonProto.print = function() { console.log('Super Button! '); } var SuperButton = document.registerElement('super-button', { prototype: buttonProto }); var supperButton = document.querySelector('super-button'); supperButton.print();Copy the code

First we use object. create to create a prototype template based on a normal element prototype. Then we modify the Object to add a print method and assign the prototype to our custom element super-button. Then each of our custom element super-button instances can call the print method.

You can also use extends for inheritance of custom elements, which extends existing element attributes. For example, to make a custom element inherit the characteristics of an H1 element, you can use the following method

var MyElement = document.registerElement('another-heading', {
  prototype: Object.create(HTMLElement.prototype),
  extends: 'h1'
});
Copy the code

So the MYElement becomes the same feature as the H1 element.

Extends can also inherit custom elements

Use of custom elements

  1. Use labels directly

  2. Use an existing tag, and then specify it as an instance of a custom tag

<! < clarence -button></ clarence -button><! <button is="supper-button"></button>Copy the code

Add attributes and methods to a custom element

The advantage of a custom element over a normal element is that you can customize the attributes and methods on the element

DefineProperty (XFooProto, "bar", {value: 5}); The // object.defineProperty () method directly defines a new property on an Object, or modifies an existing property of an Object and returns the Object. // object.defineProperty (obj, prop, descriptor) // Parameter: //obj Object to which attributes are to be defined. //prop Specifies the name or Symbol of the property to define or modify. //descriptor Property descriptor to define or modify. // add method xfooproto.foo = function() {console.log('foo() called'); }; Var XFoo = document.registerElement('x-foo', {prototype: object. create(htmlElement. prototype, {bar: {get: function() { return 5; } }, foo: { value: function() { console.log('foo() called'); }}})}); XFoo.bar() //5 XFoo.foo() //foo() calledCopy the code