From d87aea9f49876d6b45f46a24da67f25f45a1ec0b Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Tue, 6 Aug 2019 13:10:21 +0200
Subject: [PATCH] Add a wrapper for customElements.define() which adds some
error handling
In case the browser doesn't support custom elements and shadow dom we display
an error instead of the element.
This assumes the JS code executed thus far didn't lead to errors, so this only works
for semi-modern browers.
---
packages/common/utils.js | 22 ++++++++++++++++++++++
1 file changed, 22 insertions(+)
diff --git a/packages/common/utils.js b/packages/common/utils.js
index 435d82e5..f48977fe 100644
--- a/packages/common/utils.js
+++ b/packages/common/utils.js
@@ -69,5 +69,27 @@ module.exports = {
});
return btoa(utf8Bytes);
+ },
+
+ /**
+ * Like customElements.define() but tries to display an error in case the browser doesn't
+ * support everything we need.
+ *
+ * Returns false in case define failed, true otherwise.
+ *
+ * @returns {boolean}
+ */
+ defineCustomElement: (name, constructor, options) => {
+ // Checks taken from https://github.com/webcomponents/webcomponentsjs/blob/master/webcomponents-loader.js
+ if (!('attachShadow' in Element.prototype && 'getRootNode' in Element.prototype && window.customElements)) {
+ var elements = document.getElementsByTagName(name);
+ for(var i=0; i < elements.length; i++) {
+ elements[i].innerHTML = "<span style='border: 1px solid red; font-size: 0.8em; "
+ + "opacity: 0.5; padding: 0.2em;'>☹ Your browser is not supported ☹</span>";
+ }
+ return false;
+ }
+ customElements.define(name, constructor, options);
+ return true;
}
};
--
GitLab