自定义元素 v1 - 可重复使用的网络组件

class AppDrawer extends HTMLElement {...} window.customElements.define('app-drawer', AppDrawer);  // Or use an anonymous class if you don't want a named constructor in current scope. window.customElements.define('app-drawer', class extends HTMLElement {...}); 

<app-drawer></app-drawer> 

class AppDrawer extends HTMLElement {    // A getter/setter for an open property.   get open() {     return this.hasAttribute('open');   }    set open(val) {     // Reflect the value of the open property as an HTML attribute.     if (val) {       this.setAttribute('open', '');     } else {       this.removeAttribute('open');     }     this.toggleDrawer();   }    // A getter/setter for a disabled property.   get disabled() {     return this.hasAttribute('disabled');   }    set disabled(val) {     // Reflect the value of the disabled property as an HTML attribute.     if (val) {       this.setAttribute('disabled', '');     } else {       this.removeAttribute('disabled');     }   }    // Can define constructor arguments if you wish.   constructor() {     // If you define a constructor, always call super() first!     // This is specific to CE and required by the spec.     super();      // Setup a click listener on <app-drawer> itself.     this.addEventListener('click', e => {       // Don't toggle the drawer if it's disabled.       if (this.disabled) {         return;       }       this.toggleDrawer();     });   }    toggleDrawer() {     // ...   } }  customElements.define('app-drawer', AppDrawer); 

class AppDrawer extends HTMLElement {   constructor() {     super(); // always call super() first in the constructor.     // ...   }    connectedCallback() {     // ...   }    disconnectedCallback() {     // ...   }    attributeChangedCallback(attrName, oldVal, newVal) {     // ...   } } 

div.id = 'my-id'; div.hidden = true; 

<div id="my-id" hidden> 

app-drawer[disabled] {   opacity: 0.5;   pointer-events: none; } 

get disabled() {   return this.hasAttribute('disabled'); }  set disabled(val) {   // Reflect the value of `disabled` as an attribute.   if (val) {     this.setAttribute('disabled', '');   } else {     this.removeAttribute('disabled');   }   this.toggleDrawer(); } 

<app-drawer open disabled></app-drawer> 

class AppDrawer extends HTMLElement {   // ...    static get observedAttributes() {     return ['disabled', 'open'];   }    get disabled() {     return this.hasAttribute('disabled');   }    set disabled(val) {     if (val) {       this.setAttribute('disabled', '');     } else {       this.removeAttribute('disabled');     }   }    // Only called for the disabled and open attributes due to observedAttributes   attributeChangedCallback(name, oldValue, newValue) {     // When the drawer is disabled, update keyboard/screen reader behavior.     if (this.disabled) {       this.setAttribute('tabindex', '-1');       this.setAttribute('aria-disabled', 'true');     } else {       this.setAttribute('tabindex', '0');       this.setAttribute('aria-disabled', 'false');     }     // TODO: also react to the open attribute changing.   } } 

customElements.whenDefined('app-drawer').then(() => {   console.log('app-drawer defined'); }); 

<share-buttons>   <social-button type="twitter"><a href="...">Twitter</a></social-button>   <social-button type="fb"><a href="...">Facebook</a></social-button>   <social-button type="plus"><a href="...">G+</a></social-button> </share-buttons> 

// Fetch all the children of <share-buttons> that are not defined yet. let undefinedButtons = buttons.querySelectorAll(':not(:defined)');  let promises = [...undefinedButtons].map((socialButton) => {   return customElements.whenDefined(socialButton.localName); });  // Wait for all the social-buttons to be upgraded. Promise.all(promises).then(() => {   // All social-button children are ready. }); 

customElements.define('x-foo-with-markup', class extends HTMLElement {   connectedCallback() {     this.innerHTML = "<b>I'm an x-foo-with-markup!</b>";   }   // ... }); 

<x-foo-with-markup>   <b>I'm an x-foo-with-markup!</b> </x-foo-with-markup> 

<!-- chat-app's implementation details are hidden away in Shadow DOM. --> <chat-app></chat-app> 

let tmpl = document.createElement('template'); tmpl.innerHTML = `   <style>:host { ... }</style> <!-- look ma, scoped styles -->   <b>I'm in shadow dom!</b>   <slot></slot> `;  customElements.define('x-foo-shadowdom', class extends HTMLElement {   constructor() {     super(); // always call super() first in the constructor.      // Attach a shadow root to the element.     let shadowRoot = this.attachShadow({mode: 'open'});     shadowRoot.appendChild(tmpl.content.cloneNode(true));   }   // ... }); 

<x-foo-shadowdom>   <p><b>User's</b> custom text</p> </x-foo-shadowdom>  <!-- renders as --> <x-foo-shadowdom>   #shadow-root   <b>I'm in shadow dom!</b>   <slot></slot> <!-- slotted content appears here --> </x-foo-shadowdom> 

<template id="x-foo-from-template">   <style>     p { color: green; }   </style>   <p>I'm in Shadow DOM. My markup was stamped from a &lt;template&gt;.</p> </template>  <script>   let tmpl = document.querySelector('#x-foo-from-template');   // If your code is inside of an HTML Import you'll need to change the above line to:   // let tmpl = document.currentScript.ownerDocument.querySelector('#x-foo-from-template');    customElements.define('x-foo-from-template', class extends HTMLElement {     constructor() {       super(); // always call super() first in the constructor.       let shadowRoot = this.attachShadow({mode: 'open'});       shadowRoot.appendChild(tmpl.content.cloneNode(true));     }     // ...   }); </script> 

<!-- user-defined styling --> <style>   app-drawer {     display: flex;   }   panel-item {     transition: opacity 400ms ease-in-out;     opacity: 0.3;     flex: 1;     text-align: center;     border-radius: 50%;   }   panel-item:hover {     opacity: 1.0;     background: rgb(255, 0, 255);     color: white;   }   app-panel > panel-item {     padding: 5px;     list-style: none;     margin: 0 7px;   } </style>  <app-drawer>   <panel-item>Do</panel-item>   <panel-item>Re</panel-item>   <panel-item>Mi</panel-item> </app-drawer> 

app-drawer:not(:defined) {   /* Pre-style, give layout, replicate app-drawer's eventual styles, etc. */   display: inline-block;   height: 100vh;   opacity: 0;   transition: opacity 0.3s ease-in-out; } 

class FancyDrawer extends AppDrawer {   constructor() {     super(); // always call super() first in the constructor. This also calls the extended class' constructor.     // ...   }    toggleDrawer() {     // Possibly different toggle implementation?     // Use ES2015 if you need to call the parent method.     // super.toggleDrawer()   }    anotherMethod() {     // ...   } }  customElements.define('fancy-app-drawer', FancyDrawer); 

// See https://html.spec.whatwg.org/multipage/indices.html#element-interfaces // for the list of other DOM interfaces. class FancyButton extends HTMLButtonElement {   constructor() {     super(); // always call super() first in the constructor.     this.addEventListener('click', e => this.drawRipple(e.offsetX, e.offsetY));   }    // Material design ripple animation.   drawRipple(x, y) {     let div = document.createElement('div');     div.classList.add('ripple');     this.appendChild(div);     div.style.top = `${y - div.clientHeight/2}px`;     div.style.left = `${x - div.clientWidth/2}px`;     div.style.backgroundColor = 'currentColor';     div.classList.add('run');     div.addEventListener('transitionend', (e) => div.remove());   } }  customElements.define('fancy-button', FancyButton, {extends: 'button'}); 

<!-- This <button> is a fancy button. --> <button is="fancy-button" disabled>Fancy button!</button> 

// Custom elements overload createElement() to support the is="" attribute. let button = document.createElement('button', {is: 'fancy-button'}); button.textContent = 'Fancy button!'; button.disabled = true; document.body.appendChild(button); 

let button = new FancyButton(); button.textContent = 'Fancy button!'; button.disabled = true; 

customElements.define('bigger-img', class extends Image {   // Give img default size if users don't specify.   constructor(width=50, height=50) {     super(width * 10, height * 10);   } }, {extends: 'img'}); 

<!-- This <img> is a bigger img. --> <img is="bigger-img" width="15" height="20"> 

const BiggerImage = customElements.get('bigger-img'); const image = new BiggerImage(15, 20); // pass constructor values like so. console.assert(image.width === 150); console.assert(image.height === 200); 

// "tabs" is not a valid custom element name document.createElement('tabs') instanceof HTMLUnknownElement === true  // "x-tabs" is a valid custom element name document.createElement('x-tabs') instanceof HTMLElement === true 

customElements.define('my-app', class extends HTMLElement { ... }); customElements.define(     'fancy-button', class extends HTMLButtonElement { ... }, {extends: 'button'}); 

let Drawer = customElements.get('app-drawer'); let drawer = new Drawer(); 

customElements.whenDefined('app-drawer').then(() => {   console.log('ready!'); }); 

const supportsCustomElementsV1 = 'customElements' in window; 

npm install --save @webcomponents/webcomponentsjs 

<!-- Use the custom element on the page. --> <my-element></my-element>  <!-- Load polyfills; note that "loader" will load these async --> <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" defer></script>  <!-- Load a custom element definitions in `waitFor` and return a promise --> <script type="module">   function loadScript(src) {     return new Promise(function(resolve, reject) {       const script = document.createElement('script');       script.src = src;       script.onload = resolve;       script.onerror = reject;       document.head.appendChild(script);     });   }    WebComponents.waitFor(() => {     // At this point we are guaranteed that all required polyfills have     // loaded, and can use web components APIs.     // Next, load element definitions that call `customElements.define`.     // Note: returning a promise causes the custom elements     // polyfill to wait until all definitions are loaded and then upgrade     // the document in one batch, for better performance.     return loadScript('my-element.js');   }); </script>