ui: attach-shadow modifier (#12207)

* ui: attach-shadow modifier
* ui: adopt-styles helper (#12208)

ui/packages/consul-ui/app/helpers/adopt-styles.js

@@ -0,0 +1,18 @@
+import Helper from '@ember/component/helper';
+import { assert } from '@ember/debug';
+import { adoptStyles } from '@lit/reactive-element';
+
+export default class AdoptStylesHelper extends Helper {
+  /**
+   * Adopt/apply given styles to a `ShadowRoot` using constructable styleSheets if supported
+   *
+   * @param {[ShadowRoot, CSSResultGroup]} params
+   */
+  compute([$shadow, styles], hash) {
+    assert(
+      'adopt-styles can only be used to apply styles to ShadowDOM elements',
+      $shadow instanceof ShadowRoot
+    );
+    adoptStyles($shadow, [styles]);
+  }
+}

ui/packages/consul-ui/app/helpers/adopt-styles.mdx

@@ -0,0 +1,28 @@
+# adopt-styles
+
+Adopt/apply given styles to a `ShadowRoot` using constructable styleSheets if supported
+
+```hbs preview-template
+<div
+  {{attach-shadow (set this 'shadow')}}
+>
+  {{#if this.shadow}}
+    {{#in-element this.shadow}}
+      {{adopt-styles this.shadow (css '
+        :host {
+          background-color: red;
+          width: 100px;
+          height: 100px;
+        }
+      ')}}
+    {{/in-element}}
+  {{/if}}
+</div>
+```
+
+## Positional Arguments
+
+| Argument | Type | Default | Description |
+| --- | --- | --- | --- |
+| `params` | `[ShadowRoot, CSSResultGroup]` |  | |
+

ui/packages/consul-ui/app/helpers/css.js

@@ -0,0 +1,8 @@
+import Helper from '@ember/component/helper';
+import { css } from '@lit/reactive-element';
+
+export default class ConsoleLogHelper extends Helper {
+  compute([str], hash) {
+    return css([str]);
+  }
+}

ui/packages/consul-ui/app/modifiers/attach-shadow.js

@@ -0,0 +1,23 @@
+import { setModifierManager, capabilities } from '@ember/modifier';
+
+export default setModifierManager(
+  () => ({
+    capabilities: capabilities('3.13', { disableAutoTracking: true }),
+
+    createModifier() {},
+
+    installModifier(_state, element, { positional: [fn, ...args], named }) {
+      let shadow;
+      try {
+        shadow = element.attachShadow({ mode: 'open' });
+      } catch (e) {
+        // shadow = false;
+        console.error(e);
+      }
+      fn(shadow);
+    },
+    updateModifier() {},
+    destroyModifier() {},
+  }),
+  class CustomElementModifier {}
+);

ui/packages/consul-ui/app/modifiers/attach-shadow.mdx

@@ -0,0 +1,28 @@
+# attach-shadow
+
+`{{attach-shadow (set this 'shadow')}}` attaches a `ShadowRoot` to the modified DOM element
+and pass a reference to that `ShadowRoot` to the setter function.
+
+
+Please note: This should be used as a utility modifier for when having access
+to the shadow DOM is handy, not really for building full blown shadow DOM
+based Web Components.
+
+```hbs preview-template
+<div
+  {{attach-shadow (set this 'shadow')}}
+>
+  {{#if this.shadow}}
+    {{#in-element this.shadow}}
+      <slot name="name"></slot>
+    {{/in-element}}
+  {{/if}}
+  <p slot="name">Hello from the shadows!</p>
+</div>
+```
+
+## Positional Arguments
+
+| Argument | Type | Default | Description |
+| --- | --- | --- | --- |
+| `setter` | `function` |  | Usually `set` or `mut` or similar |

ui/packages/consul-ui/package.json

@@ -63,6 +63,7 @@
     "@glimmer/component": "^1.0.0",
     "@glimmer/tracking": "^1.0.0",
     "@hashicorp/ember-cli-api-double": "^3.1.0",
+    "@lit/reactive-element": "^1.2.1",
     "@mapbox/rehype-prism": "^0.6.0",
     "@xstate/fsm": "^1.4.0",
     "a11y-dialog": "^6.0.1",
@@ -79,8 +80,8 @@
     "chalk": "^4.1.0",
     "clipboard": "^2.0.4",
     "consul-acls": "*",
-    "consul-partitions": "*",
     "consul-nspaces": "*",
+    "consul-partitions": "*",
     "css.escape": "^1.5.1",
     "d3-array": "^2.8.0",
     "d3-scale": "^3.2.3",

ui/yarn.lock

@@ -1560,6 +1560,11 @@
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
   integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
 
+"@lit/reactive-element@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.2.1.tgz#8620d7f0baf63e12821fa93c34d21e23477736f7"
+  integrity sha512-03FYfMguIWo9E1y1qcTpXzoO8Ukpn0j5o4GjNFq/iHqJEPY6pYopsU44e7NSFIgCTorr8wdUU5PfVy8VeD6Rwg==
+
 "@mapbox/rehype-prism@^0.6.0":
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/@mapbox/rehype-prism/-/rehype-prism-0.6.0.tgz#3d8a860870951d4354257d0ba908d11545bd5ed5"