webreflection / regular-elements

Custom Elements made available for any node, and through CSS selectors

regularElements

---

V1 Breaking Changes

• the definition now follows standard naming convention
• callbacks are callbacks, not even driven anymore
• if present, observedAttributes must contain at least one attribute name
• browsers older than IE 11 might not work as expected
• the minified gzipped size is now ~0.9K

---

Everything I love about Custom Elements made available for any node, and through CSS selectors.

No Custom Elements, no Shadow DOM, and no polyfills are needed.

// if loaded as <script>, it's exposed as global regularElements
import {define} from 'regular-elements';

define('button.alive', {
  // lifecycle callbacks
  connectedCallback() {
    this.disabled = false;
    this.classList.add('fade-in');
  },
  disconnectedCallback() {
    console.log('goodbye');
  },

  // attributes notifications
  observedAttributes: ['only', 'these', 'attrs'],
  attributeChangedCallback(attributeName, oldValue, newValue) {
    console.log(attributeName, oldValue, newValue);
  }
});


define('#any > sel-ector[you=like]', {
  // ...
});

The module exports the same API found in CustomElementRegistry: define(selector, definition), get(selector), upgrade(node), and whenDefined(selector).

Best Practices

Since, like it is for Custom Elements, you can define one selector per time, it is suggested to not use too generic selectors such a or button in case you'd like to compose behaviors.

A single node can indeed behave in various way, as long as it matches one or more defined selector.

regularElements.define('.clicker', {
  connectedCallback() {
    this.addEventListener('click', theClicker);
  }
});
regularElements.define('.hi-five', {
  connectedCallback() {
    this.textContent += ' 🖐 ';
  }
});

Whenever an element with either the class clicker, or hi-five, or both is created or found live on the DOM, it will be setup once per behavior, as demoed here.

regular-elements's Issues

Typo`DOMNodeInsterted`

regular-elements/esm/index.js

Line 100 in 3505f96

'DOMNodeInsterted',

IE11 Event error

I started getting

TypeError · Object doesn't support this action 

in disconnected on this line:

https://github.com/WebReflection/disconnected/blob/ed23b5dde33f62612632ff69863a9699a4ffa848/esm/index.js#L69

Something to do with using CustomEvent instead of Event?

regular-elements/esm/index.js

Line 28 in d7f1e61

var poly = {Event: CustomEvent, WeakSet: WeakSet};

Thanks

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Call ondisconnected() when element no longer matches selector

ondisconnected() is called when the element is removed from the DOM, but not when the element no longer matches the selector provided in define(). For example, an element attribute could mutate, "invalidating" the element compared to its respective selector. But as is, it means that the same element gets booted up twice via two definitions, but the first initialization is never shut down (via ondisconnected()) until the element is removed from the DOM.

wickedElements.define('[is="foo"]', ...)
wickedElements.define('[is="bar"]', ...)

html`<div is=${isFoo ? 'foo' : 'bar'} />`

Maybe regularElements or wickedElements needs some other lifecycle method, if ondisconnected() is an inappropriate place for this behavior. But it feels as if there needs to be some way to undo initializing an element with the same rules for why it was initialized in the first place.

I haven't tested it, but it would be good as a comparison to know how Custom Elements handles this, for both the cases of a new tag or tag extension.

For reference, this is how when-elements behaves.

Loses dynamically matched elements

If we make element match selector dynamically, regular-elements/wicked-elements don't init that:

import wels from "wicked-elements";

wels.define(".x", {
  init() {
    console.log("init");
  },
  onconnected() {
    console.log("connected");
  }
});

let el = document.createElement("div");
document.body.appendChild(el);

setTimeout(() => {
  el.classList.add("x");
}, 100);

sandbox.

Direct mutation observer works fine

var observer = new MutationObserver((mutationList, observer) => {
  console.log(...mutationList)
});
observer.observe(el, {childList: true, attributes: true, subtree: true})
document.body.appendChild(el);

An in-range update of uglify-js is breaking the build 🚨

---

🚨 Reminder! Less than one month left to migrate your repositories over to Snyk before Greenkeeper says goodbye on June 3rd! 💜 🚚💨 💚

Find out how to migrate to Snyk at greenkeeper.io

---

The devDependency uglify-js was updated from 3.9.2 to 3.9.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

uglify-js is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ Travis CI - Branch: The build errored.

---

Release Notes for v3.9.3

 

Commits

The new version differs by 35 commits.

• 30ed8f5 v3.9.3
• dc9e7cd suppress ufuzz false positives (#3893)
• 76f40e2 fix corner case in collapse_vars (#3892)
• 8024f7f fix corner case in ie8 (#3890)
• eb7fa25 fix corner case in evaluate (#3888)
• ee7647d fix corner case in collapse_vars (#3885)
• bd2f53b fix corner case in evaluate (#3883)
• e8a7956 fix corner case in reduce_vars (#3881)
• 2b24dc2 fix corner cases in evaluate & reduce_vars (#3879)
• 35cc5aa extend --reduce-test to cover minify() bugs (#3876)
• c1dd49e fix corner case in comparisons (#3877)
• c76ee4b enhance if_return (#3875)
• e23bf48 enhance evaluate & reduce_vars (#3873)
• 7e0ad23 retain @__PURE__ call when return value is used (#3874)
• 63adfb1 fix corner case in hoist_props (#3872)

There are 35 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Do not protect against duplicate definitions

regularElements protects against multiple definitions using the same selector. This behavior does align with the behavior of Custom Elements, but it is limiting and perhaps unnecessarily so. Without such protections, it means multiple behaviors could be defined in different places, even if they affect the same set of elements. That could be helpful to isolate concerns and provide more flexibility for code organization.

For reference, this is how when-elements behaves.

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.9.2 to 1.9.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ Travis CI - Branch: The build errored.

---

Release Notes for v1.9.3

2019-04-10

Bug Fixes

• Simplify return expressions that are evaluated before the surrounding function is bound (#2803)

Pull Requests

• #2803: Handle out-of-order binding of identifiers to improve tree-shaking (@lukastaegert)

Commits

The new version differs by 3 commits.

• 516a06d 1.9.3
• a5526ea Update changelog
• c3d73ff Handle out-of-order binding of identifiers to improve tree-shaking (#2803)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴