patternfly
diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md
@@ -1,6 +1,7 @@
-# 1.10.2 (2021)
+# 1.11.0 (2021)
 
-- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Jump links parseInt for IE11
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Graceful failure for component registry
+- [5f88c39](https://github.com/patternfly/patternfly-elements/commit/5f88c3963f8a6c13a9aeba6e9f664678453d46ce) fix: Jump links parseInt for IE11
 
 # 1.10.1 (2021-07-12)
 

diff --git a/docs/_data/todos.json b/docs/_data/todos.json
diff --git a/elements/pfelement/src/pfelement.js b/elements/pfelement/src/pfelement.js
@@ -1026,7 +1026,23 @@ class PFElement extends HTMLElement {
     pfe._createCache();
     pfe._populateCache(pfe);
     pfe._validateProperties();
-    window.customElements.define(pfe.tag, pfe);
+
+    try {
+      window.customElements.define(pfe.tag, pfe);
+    } catch (err) {
+      // Capture the class currently using this tag in the registry
+      const prevDefinition = window.customElements.get(pfe.tag);
+
+      // Check if the previous definition's version matches this one
+      if (prevDefinition && prevDefinition.version !== pfe.version) {
+        this.warn(
+          `${pfe.tag} was registered at version ${prevDefinition.version}; cannot register version ${pfe.version}.`
+        );
+      }
+
+      // @TODO Should this error be reported to the console?
+      if (err && err.message) this.log(err.message);
+    }
 
     if (PFElement.trackPerformance()) {
       try {

diff --git a/elements/pfelement/test/index.html b/elements/pfelement/test/index.html
@@ -15,10 +15,11 @@
       'pfelement_properties_test.html',
       'pfelement_cascade_attribute_test.html',
       'pfelement_logging_test.html',
+      'pfelement_context_test.html',
       // @TODO: Deprecate after 1.0
       'old-test/pfelement_test.html',
       'old-test/pfelement_cascade_attribute_test.html',
-      'old-test/pfelement_logging_test.html'
+      'old-test/pfelement_logging_test.html',
     ]);
 
   </script>

diff --git a/elements/pfelement/test/pfelement_context_test.html b/elements/pfelement/test/pfelement_context_test.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <script src="/components/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+  <script src="/components/web-component-tester/browser.js"></script>
+</head>
+
+<body>
+
+  <pfelement>
+    This is the element content.
+  </pfelement>
+
+  <script type="module">
+    import PFElement from "../dist/pfelement.js";
+
+    const colors = ["red", "yellow", "blue"];
+
+    class TestElement extends PFElement {
+      static get tag() {
+        return "pfe-test-element"
+      }
+
+      static get version() {
+        return "1.0";
+      }
+
+      get html() {
+        return `
+          <style>:host{--context:dark;}</style>
+          <div>Test Element</div>
+        `;
+      }
+
+      constructor() {
+        super(TestElement, { type: PFElement.PfeTypes.Content });
+      }
+    }
+
+    PFElement.create(TestElement);
+
+    class TestChildElement extends PFElement {
+      static get tag() {
+        return "pfe-test-child-element"
+      }
+
+      get html() {
+        return `
+          <div>Test Child Element</div>
+        `;
+      }
+
+      constructor() {
+        super(TestChildElement, { type: PFElement.PfeTypes.Content });
+      }
+    }
+
+    PFElement.create(TestChildElement);
+
+    suite('<pfelement>', () => {
+      teardown(() => {
+        const testElement = document.getElementById("test-element");
+
+        if (!testElement) return;
+
+        document.body.removeChild(testElement);
+      });
+
+      test("it should default to the provided --context variable in the component's stylesheet", () => {
+        const testElement = document.createElement("pfe-test-element");
+
+        testElement.id = "test-element";
+        document.body.appendChild(testElement);
+
+        assert.equal(testElement.getAttribute("on"), "dark");
+      });
+
+      test("it should update the on attribute if style with --context is manually added after upgrade", () => {
+        const testElement = document.createElement("pfe-test-element");
+
+        testElement.id = "test-element";
+        document.body.appendChild(testElement);
+
+        testElement.setAttribute("style", "color: pink; --context: light;");
+
+        assert.equal(testElement.getAttribute("on"), "light");
+      });
+
+      test("it should favor context attribute over the --context variable", () => {
+        const testElement = document.createElement("pfe-test-element");
+
+        testElement.id = "test-element";
+        document.body.appendChild(testElement);
+
+        testElement.setAttribute("context", "saturated");
+        testElement.setAttribute("style", "color: pink; --context: light;");
+
+        assert.equal(testElement.getAttribute("on"), "saturated");
+      });
+
+      test("it should update the on attribute if context is manually added after upgrade", () => {
+        const testElement = document.createElement("pfe-test-element");
+
+        testElement.id = "test-element";
+        document.body.appendChild(testElement);
+
+        document.querySelector("#test-element").setAttribute("context", "light");
+
+        assert.equal(testElement.getAttribute("on"), "light");
+      });
+
+      test("it should push down the context to children", done => {
+        const testElement = document.createElement("pfe-test-element");
+        const testChildElement = document.createElement("pfe-test-child-element");
+
+        testElement.id = "test-element";
+        testChildElement.id = "test-child-element";
+
+        testElement.appendChild(testChildElement);
+        document.body.appendChild(testElement);
+
+        flush(() => {
+          assert.equal(testChildElement.getAttribute("on"), "dark");
+          done();
+        });
+      });
+
+      test("it should push an attribute override context down to the children", done => {
+        const testElement = document.createElement("pfe-test-element");
+        const testChildElement = document.createElement("pfe-test-child-element");
+
+        testElement.id = "test-element";
+        testChildElement.id = "test-child-element";
+
+        testElement.appendChild(testChildElement);
+        document.body.appendChild(testElement);
+
+        // Add the context information
+        testElement.setAttribute("context", "light");
+
+        flush(() => {
+          assert.equal(testChildElement.getAttribute("on"), "light");
+          done();
+        });
+      });
+
+      test("it should push a variable override context down to the children", done => {
+        const testElement = document.createElement("pfe-test-element");
+        const testChildElement = document.createElement("pfe-test-child-element");
+
+        testElement.id = "test-element";
+        testChildElement.id = "test-child-element";
+
+        testElement.appendChild(testChildElement);
+        document.body.appendChild(testElement);
+
+        // Add the context information
+        testElement.setAttribute("style", "--context: light;");
+
+        flush(() => {
+          assert.equal(testChildElement.getAttribute("on"), "light");
+          done();
+        });
+      });
+
+      test("it should favor child's context if set via variable --context", () => {
+        const testElement = document.createElement("pfe-test-element");
+        const testChildElement = document.createElement("pfe-test-child-element");
+
+        testElement.id = "test-element";
+        testChildElement.id = "test-child-element";
+
+        testElement.appendChild(testChildElement);
+        document.body.appendChild(testElement);
+
+        // Add the context information
+        testChildElement.setAttribute("style", "--context: light;");
+
+        assert.equal(testChildElement.getAttribute("on"), "light");
+      });
+
+      test("it should favor child's context if the child has context set", () => {
+        const testElement = document.createElement("pfe-test-element");
+        const testChildElement = document.createElement("pfe-test-child-element");
+
+        testElement.id = "test-element";
+        testChildElement.id = "test-child-element";
+
+        testElement.appendChild(testChildElement);
+        document.body.appendChild(testElement);
+
+        // Add the context information
+        testChildElement.setAttribute("context", "light");
+
+        assert.equal(testChildElement.getAttribute("on"), "light");
+      });
+
+      // @TODO Deprecated for 1.0
+      test("it should update the on attribute if style with --theme is manually added after upgrade", () => {
+        const testElement = document.createElement("pfe-test-element");
+
+        testElement.id = "test-element";
+        document.body.appendChild(testElement);
+
+        assert.equal(testElement.getAttribute("on"), "dark");
+        testElement.setAttribute("style", "color: pink; --theme: light;");
+        assert.equal(testElement.getAttribute("on"), "light");
+      });
+
+      // @TODO Deprecated for 1.0
+      test("it should update the on and context attributes if pfe-theme is manually added after upgrade", () => {
+        const testElement = document.createElement("pfe-test-element");
+
+        testElement.id = "test-element-theme";
+        document.body.appendChild(testElement);
+
+        document.querySelector("#test-element-theme").setAttribute("pfe-theme", "light");
+
+        assert.equal(testElement.getAttribute("on"), "light");
+        assert.equal(testElement.getAttribute("context"), "light");
+      });
+
+    });
+  </script>
+</body>
+
+</html>