Using custom elements - Web Components
for example, connectedcallback is invoked each time the custom element is appended into a document-connected element, while attributechangedcallback is invoked when one of the custom element's attributes is added, removed, or changed.
... attributechangedcallback: invoked each time one of the custom element's attributes is added, removed, or changed.
...ded to page.'); updatestyle(this); } the disconnectedcallback() and adoptedcallback() callbacks log simple messages to the console to inform us when the element is either removed from the dom, or moved to a different page: disconnectedcallback() { console.log('custom square element removed from page.'); } adoptedcallback() { console.log('custom square element moved to new page.'); } the attributechangedcallback() callback is run whenever one of the element's attributes is changed in some way.
...in this case however, we are just running the updatestyle() function again to make sure that the square's style is updated as per the new values: attributechangedcallback(name, oldvalue, newvalue) { console.log('custom square element attributes changed.'); updatestyle(this); } note that to get the attributechangedcallback() callback to fire when an attribute changes, you have to observe the attributes.

Style System Overview - Archive of obsolete content
nscssframeconstructor::attributechanged only re-resolves style on the subtree of the element, just like other attribute changes.
... different hint mechanism (from rule structs, not data structs) could make attributechanged just go straight to a frame-change, instead.

Mozilla Style System Documentation
dynamic changes describe nsframemanager::reresolvestylecontext and nsiframe::getparentstylecontextframe ...</p> describe nscssframeconstructor::attributechanged hack for style attribute that avoids style context tree manipulation.

Element.shadowRoot - Web APIs
connectedcallback() { console.log('custom square element added to page.'); updatestyle(this); } attributechangedcallback(name, oldvalue, newvalue) { console.log('custom square element attributes changed.'); updatestyle(this); } in the updatestyle() function itself, we get a reference to the shadow dom using element.shadowroot.

ShadowRoot - Web APIs
connectedcallback() { console.log('custom square element added to page.'); updatestyle(this); } attributechangedcallback(name, oldvalue, newvalue) { console.log('custom square element attributes changed.'); updatestyle(this); } in the updatestyle() function itself, we get a reference to the shadow dom using element.shadowroot.

Web Components
attributechangedcallback: invoked when one of the custom element's attributes is added, removed, or changed.