feat: add ShadyDOM / ShadyCSS cross browser support while still using…

… Preact-based rendering.

src/_patterns/01-core/05-objects/bolt-ratio-object/src/ratio.standalone.js

@@ -23,6 +23,11 @@ export class BoltRatio extends withComponent(withPreact()) {
 
   constructor(){
     super();
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+    }
+    this.shadyTemplate = document.createElement('template');
+    this.shadyPrepared = false;
     this.supportsCSSVars = window.CSS && CSS.supports('color', 'var(--primary)');
   }
 
@@ -47,15 +52,58 @@ export class BoltRatio extends withComponent(withPreact()) {
   }
 
   connectedCallback() {
+    this.update();
+    this._computeRatio();
+  }
+
+  // Called when props have been set regardless of if they've changed. - recalculates ratio if props updated
+  updating(props) {
     this._computeRatio();
   }
 
+  // Render out component via Preact
   render() {
     const classes = css(
       'o-bolt-ratio__inner'
     );
 
     return (
+      <div className={classes}>
+        <style>{styles[0][1]}</style>
+        <slot />
+      </div>
     )
   }
+
+  /** Idea for wiring up ShadyCSS + Preact inspired by https://github.com/daKmoR/lit-html-demos/blob/master/demo/wc02.html **/
+  _render(what, where) {
+    this.render(what, where);
+
+    if (typeof ShadyCSS === 'object') {
+      if (this.shadyPrepared === false) {
+        this.shadyTemplate.innerHTML = this.shadowRoot.innerHTML;
+        ShadyCSS.prepareTemplate(this.shadyTemplate, this.localName);
+        this.shadyPrepared = true;
+      }
+      ShadyCSS.styleElement(this);
+
+    /** @TODO: determine if this logic below is required. This <style> node cleanup was
+     *  included in original example (mentioned above) so keeping around for now.
+     */
+      // if (!ShadyCSS.nativeShadow) {
+      //   this.shadowRoot.querySelectorAll('style').forEach((styleNode) => {
+      //     styleNode.remove();
+      //   });
+      // }
+    }
+  }
+
+  update() {
+    this._render(this.render(), this.shadowRoot);
+  }
+
+  updateShady() {
+    this.shadyPrepared = false;
+    this.update();
+  }
 }