Practical lessons from a year of building web components - Google I/O 2016
Why Stack Overflow recommends it
Stack Overflow users link it when answering Polymer questions, especially to point at Polymer.RenderStatus.afterNextRender and to back up advice on structuring shared element code.
Recommended by 1 people across 1 different months, 2016 to 2020.
What it is
A Google I/O 2016 conference talk from the Chrome team, drawn from a year of building the Polymer Elements. It covers what makes a good web component, how to design an API that works across browsers, how to make components render quickly, and how to teach people to use them.
What people said
Recommends Danny 'Quest' Engelman · 2020-10 · Stack Overflow · on “Main differences between lit-element Web Components & React”
Frameworks CREATE HTML, Web Components ARE HTML written: october 2020 React (Over a decade old now, by Facebook/Meta), key feature is its virtual DOM. That means all DOM elements are created in memory and React is in charge of delivering them to the (real) DOM . That also means you can NOT do any DOM updates yourself, or use the W3C standard Events system. everything in the (real) DOM is handled by React. Great when, like Facebook, you have to prevent thousands of developers messing around in the same DOM. ( There is no slow DOM, only developers writing slow code accessing the DOM ) Update 2022 React R18 [LINK] still doesn't mention Custom Elements/native Web Components Update 2024 The last
Cites Thoran · 2016-05 · Stack Overflow · on “How to share functionality between Polymer elements in the right way?”
Polymer behaviors [LINK] are great. But sometimes I need to share a single function/method across multiple elements. I don't need lifecycle callbacks, declared properties, etc that comes with behaviors. I do not know the architecture of Polymer well enough to know: the best way and place (in life-cycle callbacks?) to add shared methods to custom elements when it is better to extend the Polymer.Base ? Example 1: Let's say we want to add a method for lazy-listening that will attach event listeners to elements afterNextRender : Polymer.RenderStatus.afterNextRender(this, function() { // add event listeners }); As Monica explains in Practical lessons from a year of building web components - Googl
Cites tony19 · 2016-12 · Stack Overflow · on “Run a method once dom-repeat's rendering is all done”
To register a one-time callback after the next render, use Polymer.RenderStatus.afterNextRender(this, function() {...}) , where this is your Polymer object. Example: Polymer({ _addItem: function() { this.push('items', new Item()); Polymer.RenderStatus.afterNextRender(this, () => { // set scroll top }); } }); codepen [LINK] The method is currently undocumented in 1.x (even in its source code [LINK] ), but you'll notice it in the 2.0 upgrade guide in Callbacks contracts have changed [LINK] : Use the Polymer.RenderStatus.afterNextRender function to register a one-time callback after the next render. I first discovered it at Google I/O 2016 Practical lessons from a year of building web component