原标题：Web 组件即将取代前端框架？！| 技术头条 以下为译文：
.customElements.define( , MyElement); { () { (); } connectedCallback() { } } customElements.define( , {...}); ... el = customElements. ( ); myElement = el(); .body.(myElement); { get { [ , ]; } attributeChangedCallback(attr, oldVal, newVal) { (attr) { : : } } }
-> -> () { .container = .shadowRoot.querySelector( ); } attributeChangedCallback(attr, oldVal, newVal) { (attr === ) { ( .hasAttribute( ) { .container.style.background = ; } { .container.style.background = ; } } } customElements.whenDefined( ) . ( =>{ my-element now defined })
{ ... doSomething() { something method } } element = . ( ); element.doSomething(); < name= > const = document.querySelector( ); .disabled = ; => { ... disabled(isDisabled) { (isDisabled) { .setAttribute( , ); } { .removeAttribute( ); } } disabled() { .hasAttribute( ); } } { static observedAttributes() { [ ]; } () { const shadowRoot = .attachShadow({mode: }); shadowRoot.innerHTML = ` <style> .disabled { opacity: ; } </style> <div id= ></div> `; .container = .shadowRoot( ); } attributeChangedCallback(attr, oldVal, newVal) { (attr === ) { ( .disabled) { .container.classList.add( ); } { .container.classList.remove( ) } } } }
shadowRoot = .attachShadow({ : }); shadowRoot.innerHTML = ; { : block; } ) { : ; } { : initial; } { : inline-block; } { : block; } { : (--background-color); } { : ; } { : ; } { : (--background-color); }
> ==> ==> > => => =></> > > => => => ==> ==> > > >
=> => ></> ></> > >No image here! >> > > > => => > => > > => > > >No image here! > > > > { : left; } > => => > >
slot.addEventListener( , e => { changedSlot = e.target; .log(changedSlot.assignedNodes()); });
{ ... connectedCallback() { .dispatchEvent( CustomEvent( , { detail: {message: } })); } } . ( ).addEventListener( , e => console.log( , e.detail.message)); { ... connectedCallback() { .container = .shadowRoot.querySelector( ); dispatchEvent now called .container instead .container.dispatchEvent( CustomEvent( , { detail: {message: }, composed: without composed: event will bubble out Shadow DOM })); } }
{ ... () { const shadowRoot = .attachShadow({mode: }); .shadowRoot.innerHTML = ` <template id= > <p>This view </p> </template> <template id= > <p>This view </p> </template> <div id= > <p>This the container</p> </div> `; } connectedCallback() { const content = .shadowRoot.querySelector( ).content.clondeNode( ); .container = .shadowRoot.querySelector( ); .container.(content); } }
{ ... constructor() { (); } connectedCallback() { ... } someMethod() { ... } } customElements.define( , MyButton, { : }); <button = > > > =></> > >
; describe( , =>{ let element; beforeEach( =>{ element = .( ); .body.(element); }); afterEach( =>{ .body.removeChild(element); }); it( , =>{ run your test here }); }); > > => ==> =></> =></> =></> =></> > .assert = chai.assert; mocha.setup(); </> ==></> => mocha.run(); </> > > =></> > >
install --save @webcomponents/webcomponentsjs
= = = = =></> <img = src= http://www.sohu.com/a/ width= height= delay= margin= >
<template id= > <h1>{{title}}</h1> <p>{{text}}</p> </template> template = . ( ); instance = template.createInstance({title: , text: }); shadowRoot.(instance.content); instance.update({title: , text: });
|
