feat(web): new banner type - HTMLBanner

web/src/engine/osk/src/banner/bannerView.ts

@@ -9,6 +9,7 @@ import { ImageBanner } from './imageBanner.js';
 import OSKViewComponent from '../components/oskViewComponent.interface.js';
 import { ParsedLengthStyle } from '../lengthStyle.js';
 import { SuggestionBanner } from './suggestionBanner.js';
+import { HTMLBanner } from './htmlBanner.js';
 
 /**
  * This object is used to specify options by both `BannerManager.getOptions`
@@ -182,6 +183,12 @@ export class BannerController {
    */
   public readonly ImageBanner = ImageBanner;
 
+  /**
+   * Builds a banner for use when predictions are not active, supporting a more generalized
+   * content pattern than ImageBanner via `innerHTML` specifications.
+   */
+  public readonly HTMLBanner = HTMLBanner;
+
   constructor(bannerView: BannerView, hostDevice: DeviceSpec, predictionContext?: PredictionContext) {
     // Step 1 - establish the container element.  Must come before this.setOptions.
     this.hostDevice = hostDevice;

web/src/engine/osk/src/banner/htmlBanner.ts

@@ -0,0 +1,32 @@
+import { Banner } from "./banner.js";
+
+export class HTMLBanner extends Banner {
+  readonly container: ShadowRoot | HTMLElement;
+  readonly type = 'html';
+
+  constructor(contents?: string) {
+    super();
+
+    const bannerHost = this.getDiv();
+
+    // Ensure any HTML styling applied for the banner contents only apply to the contents,
+    // and not the banner's `position: 'relative'` hosting element.
+    const div = document.createElement('div');
+    div.style.userSelect = 'none';
+    div.style.height = '100%';
+    div.style.width = '100%';
+    bannerHost.appendChild(div);
+
+    // If possible, quarantine styling and JS for the banner contents within Shadow DOM.
+    this.container = (div.attachShadow) ? div.attachShadow({mode: 'closed'}) : div;
+    this.container.innerHTML = contents;
+  }
+
+  get innerHTML() {
+    return this.container.innerHTML;
+  }
+
+  set innerHTML(raw: string) {
+    this.container.innerHTML = raw;
+  }
+}