feat: Update version to 3.0.4 and enhance CustomBranding functionality

src/extensions/customBranding/CustomBrandingApplicationCustomizer.ts

@@ -25,7 +25,7 @@ export default class CustomBrandingApplicationCustomizer
 
   private _topPlaceholder: PlaceholderContent | undefined;
   private _bottomPlaceholder: PlaceholderContent | undefined;
-  private _topHost: HTMLElement | undefined;
+  private _topElements: HTMLElement[] = [];
   private _bottomHost: HTMLElement | undefined;
   private _renderer: BrandingDomRenderer = new BrandingDomRenderer();
   private _cssLoader: BrandingCssLoader | undefined;
@@ -39,7 +39,7 @@ export default class CustomBrandingApplicationCustomizer
       this.context.pageContext.site.absoluteUrl
     );
     this._config = result.config;
-    this.debug(strings.Initialized + ' 3.0.0.', {
+    this.debug(strings.Initialized + ' 3.0.4.', {
       schemaVersion: this._config.schemaVersion,
       cssFileCount: this._config.cssfiles.length,
       warningCount: result.warnings.length
@@ -78,11 +78,8 @@ export default class CustomBrandingApplicationCustomizer
 
     if (this._topPlaceholder && this._topPlaceholder.domElement) {
       this._topPlaceholder.domElement.id = 'CustomHeader';
-      this._topHost = this.getOrCreateOwnedHost(
-        this._topPlaceholder.domElement,
-        'CustomBrandingTopHost'
-      );
-      this.renderSafely(this._topHost, this._config.placeholdertop.elements);
+      this.removeLegacyTopHost(this._topPlaceholder.domElement);
+      this.renderTopSafely(this._topPlaceholder.domElement, this._config.placeholdertop.elements);
     }
     if (this._bottomPlaceholder && this._bottomPlaceholder.domElement) {
       this._bottomPlaceholder.domElement.id = 'CustomFooter';
@@ -106,7 +103,7 @@ export default class CustomBrandingApplicationCustomizer
     host.style.fontSize = '14px';
     host.style.color = '#323130';
     host.style.borderTop = id === 'CustomBrandingBottomHost' ? '1px solid #edebe9' : '';
-    host.style.borderBottom = id === 'CustomBrandingTopHost' ? '1px solid #edebe9' : '';
+    host.style.borderBottom = '';
     return host;
   }
 
@@ -124,9 +121,48 @@ export default class CustomBrandingApplicationCustomizer
     }
   }
 
+  private renderTopSafely(host: HTMLElement, elements: IBrandingElement[]): void {
+    this.clearTopElements();
+    const staging: HTMLElement = document.createElement('div');
+    try {
+      this._renderer.render(staging, elements);
+    } catch (error) {
+      this._renderer.clear(staging);
+      const status: HTMLElement = document.createElement('div');
+      status.className = 'custom-branding-status';
+      status.setAttribute('role', 'status');
+      status.textContent = strings.RenderError;
+      staging.appendChild(status);
+      this.debug('Top rendering failed.', error);
+    }
+
+    const insertBefore: ChildNode | null = host.firstChild;
+    while (staging.firstChild) {
+      const element: HTMLElement = staging.firstChild as HTMLElement;
+      element.setAttribute('data-custom-branding-owner', COMPONENT_ID);
+      element.setAttribute('data-custom-branding-placement', 'top');
+      host.insertBefore(element, insertBefore);
+      this._topElements.push(element);
+    }
+  }
+
+  private clearTopElements(): void {
+    for (let i: number = 0; i < this._topElements.length; i++) {
+      const element: HTMLElement = this._topElements[i];
+      if (element.parentNode) { element.parentNode.removeChild(element); }
+    }
+    this._topElements = [];
+  }
+
+  private removeLegacyTopHost(parent: HTMLElement): void {
+    const legacyHost: HTMLElement = parent.querySelector('#CustomBrandingTopHost') as HTMLElement;
+    if (legacyHost && legacyHost.parentNode === parent) {
+      parent.removeChild(legacyHost);
+    }
+  }
+
   private _onTopPlaceholderDisposed = (): void => {
-    this.removeHost(this._topHost);
-    this._topHost = undefined;
+    this.clearTopElements();
     this._topPlaceholder = undefined;
     this.debug('Top placeholder disposed; waiting for a new placeholder.');
   }
@@ -143,12 +179,11 @@ export default class CustomBrandingApplicationCustomizer
     if (this._isDisposed) { return; }
     this._isDisposed = true;
     this.context.placeholderProvider.changedEvent.remove(this, this._renderPlaceholders);
-    this.removeHost(this._topHost);
+    this.clearTopElements();
     this.removeHost(this._bottomHost);
     if (this._cssLoader) {
       this._cssLoader.dispose();
     }
-    this._topHost = undefined;
     this._bottomHost = undefined;
     this._topPlaceholder = undefined;
     this._bottomPlaceholder = undefined;