- From: Danny McGee <notifications@github.com>
- Date: Tue, 15 Dec 2020 14:36:30 -0800
- To: WICG/webcomponents <webcomponents@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <WICG/webcomponents/issues/509/745610832@github.com>
@GeorgeTailor Besides @WebReflection's point about tables, I strongly believe that wrapping elements in some custom tag that hides the original element's API is an anti-pattern. * It requires an [absolutely ridiculous](https://github.com/microsoft/fast/blob/master/packages/web-components/fast-foundation/src/button/button.template.ts) amount of boilerplate to enable your custom element to serve as a drop-in replacement for the original, in addition to the runtime overhead of needing to check and update each of those bindings. * There's also some awkward layout consequences (and more performance overhead) introduced by the extra DOM node itself. React bypasses the boilerplate issue via its "prop spreading" syntax, and completely avoids the extra-DOM-node awkwardness since your custom component tag doesn't actually exist as a real DOM element. But in Angular (which uses custom elements under the hood) the [common recommendation from experts](https://www.youtube.com/watch?v=0BikjL858OQ) is to use "attribute selectors" or directives to modify the template and/or behavior of a native element without hiding its API. The "attribute selector" pattern is essentially what the `is=""` spec would have been, and directives basically fill the role of [the `has=""` suggestion for mixins](https://github.com/WICG/webcomponents/issues/727), but right now there's nothing in the custom elements spec that addresses either use case in a satisfactory way. -- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: https://github.com/WICG/webcomponents/issues/509#issuecomment-745610832
Received on Tuesday, 15 December 2020 22:36:42 UTC