fix: issue with custom styles piercing shadow DOM rendering (#1365)

* fix: Fixing issue with custom styles piercing shadow DOM rendering
* fix: Move the creation of the new elements into the hasLightDOM check
* fix: Force hide anything that isn't the accordion or tab in the light DOM
* fix: Update AT and resolve changes based on code review feedback
* fix: Remove old tests because backwards compatible attributes are supported in main testing
* fix: Patch edge case Kendall found

Co-authored-by: Michael Potter <[email protected]>
Co-authored-by: castastrophe <[email protected]>

Author: 3 people

CHANGELOG-1.x.md

@@ -1,6 +1,10 @@
-# 1.3.0 (2021-02-16)
+# 1.3.0 (2021-02-17)
 
-- [](https://github.com/patternfly/patternfly-elements/commit/) feat: adding a $custom-prop-prefix variable to relieve naming conflict risk ($repo is too generic).
+### Features
+- [e7c0f3a](https://github.com/patternfly/patternfly-elements/commit/e7c0f3a45648f26c87bc3447f7c6a47c8c00c1a0) feat: adding a $custom-prop-prefix variable to relieve naming conflict risk ($repo is too generic).
+
+### Fixes
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-content-set requires light DOM styles in panels
 
 ## 1.2.0 ( 2021-02-12 )
 

elements/pfe-content-set/demo/demo.css

@@ -60,4 +60,10 @@ section h3 {
     margin-right: 2%;
     border: #eee solid 1px;
     padding: 20px;
+}
+
+.custom-styles {
+    font-family: "Comic Sans MS", "Comic Sans", cursive;
+    font-weight: bolder;
+    color: orangered;
 }

elements/pfe-content-set/demo/index.html

@@ -95,9 +95,12 @@ <h4 pfe-content-set--header>Heading 1</h4>
           varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
       </div>
       <h4 pfe-content-set--header>Heading 2</h4>
-      <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi
+      <div pfe-content-set--panel>
+        <p>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi
         porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus
-        mollis interdum.</div>
+        mollis interdum.</p>
+        <p class="custom-styles">Custom styles to validate that they still work!</p>
+      </div>
       <h4 pfe-content-set--header>Heading 3</h4>
       <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec
         ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo
@@ -274,9 +277,9 @@ <h4 pfe-content-set--header>Heading 1</h4>
         <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit
           amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus
           varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
-        <div class="cta">
+        <pfe-cta>
           <a href="https://redhat.com">Primary CTA</a>
-        </div>
+        </pfe-cta>
       </div>
       <h4 pfe-content-set--header>Heading 2</h4>
       <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi
@@ -532,11 +535,11 @@ <h2>Content 2</h2>
 
       var header = document.createElement("h4");
       header.setAttribute("pfe-content-set--header", true);
-      header.textContent = "New Heading";
+      header.textContent = "New heading";
 
       var panel = document.createElement("div");
       panel.setAttribute("pfe-content-set--panel", true);
-      panel.textContent = "New Panel";
+      panel.textContent = "New panel";
 
       fragment.appendChild(header);
       fragment.appendChild(panel);

elements/pfe-content-set/package.json

@@ -47,13 +47,21 @@
     {
       "name": "Kendall Totten"
     },
+    {
+      "name": "castastrophe",
+      "url": "https://www.github.com/castastrophe"
+    },
     {
       "name": "Kyle Buchanan",
       "email": "[email protected]",
       "url": "https://github.com/kylebuch8"
     }
   ],
   "license": "MIT",
+  "devDependencies": {
+    "@patternfly/pfe-cta": "^1.2.0",
+    "@patternfly/pfe-styles": "^1.2.0"
+  },
   "dependencies": {
     "@patternfly/pfe-accordion": "^1.2.0",
     "@patternfly/pfe-tabs": "^1.2.0",

elements/pfe-content-set/src/pfe-content-set.html

@@ -1,5 +1,2 @@
-<div id="lightdom" hidden>
-  <slot></slot>
-</div>
-<pfe-tabs hidden visible-at="large"></pfe-tabs>
-<pfe-accordion hidden visible-at="small"></pfe-accordion>
+<slot id="lightdom" hidden></slot>
+<slot name="_view" private></slot>