fix: missing style tag b/c no html template loaded (#1503)

* fix: Add back an empty html file so the style tag can be appended

* fix: Changelog update

* fix: Add a container to maintain style tag in rebuild

* fix: Add polyfill to fix IE11 break

* fix: Update baselines

Author: castastrophe

CHANGELOG-1.x.md

@@ -1,6 +1,7 @@
-# 1.4.0 (2021)
+# 1.4.0 (2021-03-30)
 
-- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add performance marks to PFElement for more accurate reporting on performance
+- [76c2c36](https://github.com/patternfly/patternfly-elements/commit/76c2c3689a9a338b278d99f6e2d3cbeef4f3cc3d) feat: Add performance marks to PFElement for more accurate reporting on performance
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-content-set bring back template to inject style tag for alignment settings
 
 # 1.3.4 (2021-03-29)
 

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

@@ -0,0 +1 @@
+<div id="container"></div>

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

@@ -19,6 +19,10 @@ class PfeContentSet extends PFElement {
     return "pfe-content-set.scss";
   }
 
+  get templateUrl() {
+    return "pfe-content-set.html";
+  }
+
   static get meta() {
     return {
       title: "Content set",
@@ -171,7 +175,7 @@ class PfeContentSet extends PFElement {
   get view() {
     if (!this._rendered) return;
 
-    return this.shadowRoot.querySelector(this.expectedTag);
+    return this.shadowRoot.querySelector(`#container > ${this.expectedTag}`);
   }
 
   /**
@@ -475,8 +479,8 @@ class PfeContentSet extends PFElement {
     // @todo find out why we need this shim
     // Shadydom breaks if we use innerHTML to set the new content but Selenium will infinitely
     // loop in out tests if we use appendChild.
-    if (window.ShadyDOM) this.shadowRoot.appendChild(view);
-    else this.shadowRoot.innerHTML = view.outerHTML;
+    if (window.ShadyDOM) this.shadowRoot.querySelector(`#container`).appendChild(view);
+    else this.shadowRoot.querySelector(`#container`).innerHTML = view.outerHTML;
 
     Promise.all([customElements.whenDefined(tag)]).then(() => {
       this.cascadeProperties();

elements/pfe-content-set/test/pfe-content-set_test.js

@@ -318,7 +318,7 @@ suite("<pfe-content-set> cascading attributes", () => {
       pfeContentSet.setAttribute("vertical", "");
 
     flush(() => {
-      const pfeTabs = pfeContentSet.shadowRoot.querySelector(':scope > pfe-tabs');
+      const pfeTabs = pfeContentSet.shadowRoot.querySelector('pfe-tabs');
       assert.equal(pfeContentSet.getAttribute("vertical"), pfeTabs.getAttribute("vertical"));
 
       done();

elements/pfelement/src/pfelement.js

@@ -308,7 +308,7 @@ class PFElement extends HTMLElement {
     } else if (this.id.startsWith("pfe-") && !this.id.startsWith(this.tag)) {
       this._markId = this.id.replace("pfe", this.tag);
     } else {
-        this._markId = `${this.tag}-${this.id}`;
+      this._markId = `${this.tag}-${this.id}`;
     }
 
     this._markCount = 0;
@@ -421,16 +421,12 @@ class PFElement extends HTMLElement {
     if (PFElement.trackPerformance()) {
       try {
         performance.mark(`${this._markId}-rendered`);
-        
+
         if (this._markCount < 1) {
           this._markCount = this._markCount + 1;
 
           // Navigation start, i.e., the browser first sees that the user has navigated to the page
-          performance.measure(
-            `${this._markId}-from-navigation-to-first-render`,
-            undefined,
-            `${this._markId}-rendered`
-          );
+          performance.measure(`${this._markId}-from-navigation-to-first-render`, undefined, `${this._markId}-rendered`);
 
           // Render is run before connection unless delayRender is used
           performance.measure(

elements/pfelement/src/polyfills--pfelement.js

@@ -62,3 +62,14 @@ if (!Object.entries) {
     return resArray;
   };
 }
+
+// @POLYFILL String.startsWith
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith#polyfill
+if (!String.prototype.startsWith) {
+  Object.defineProperty(String.prototype, "startsWith", {
+    value: function(search, rawPos) {
+      var pos = rawPos > 0 ? rawPos | 0 : 0;
+      return this.substring(pos, pos + search.length) === search;
+    }
+  });
+}