[Webkit-unassigned] [Bug 182671] Implementation (or not) of customized builtins (is="" attribute)

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Fri Dec 27 18:36:21 PST 2019


--- Comment #6 from Joe Pea <joe at trusktr.io> ---
Mark, in case it helps, I have an alternative to the is="" attribute at https://github.com/infamous/element-behaviors.

It works almost exactly the same as Custom Elements and the is="" attribute, except it is simpler, does not rely on extending native classes, and any element can have more than one "behavior" applied to it.

If you already have code like `is="awesome-button"`, then it is very easy to port to element-behaviors (and get it working in all browsers without crazy polyfills like are needed for Custom Elements) by converting it simply to `has="awesome-button"`.

The main differences are:

1) An element can have more than one class ("behavior") applied to it, so you can write `has="awesome-button cool-thing other-stuff"`.

2) Instead of `this` referencing the element, the constructor receives the element as a single arg (you can then store it on `this.element` or whatever you prefer).

So here's a simple full example:

class AwesomeButton {
  constructor(element) { this.element = element }

  // the same life cycle methods that you're familiar with:
  connectedCallback() { console.log(this.element.tagName + ' is connected') }
  disconnectedCallback() { console.log(this.element.tagName + ' is disconnected') }
  attributeChangedCallback(attr, oldVal, newVal) { ... }

class CoolThing { /* ... similar ... */ }
class OtherStuff { /* ... similar ... */ }

elementBehaviors.define('awesome-button', AwesomeButton)
elementBehaviors.define('cool-thing', CoolThing)
elementBehaviors.define('other-stuff', OtherStuff)

then in your HTML:

  <tr has="awesome-button cool-thing other-stuff">

This literally let's you do the same thing as with Custom Elements, but without the problems. It is fully compatible with old browsers (through transpilation to ES5 or ES3) without any of the caveats (as you may know already, the polyfills for Custom Elements are very tricky to use, but these problems are all non-existent with element-behaviors).

You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20191228/3f4008b0/attachment.htm>

More information about the webkit-unassigned mailing list