```
class PluginInterface {
  /**
   * Provides the plugin's CSS rules based on current global configurations.
   * @returns {string} - The CSS rule(s) as a string.
   */
  getCSS() {
    throw new Error('getCSS method must be implemented by the plugin.');
  }

  /**
   * Sets global CSS variables on the shadow host.
   * @param {HTMLElement} host - The shadow host element.
   */
  setGlobalVariables(host) {
    throw new Error('setGlobalVariables method must be implemented by the plugin.');
  }

  /**
   * Updates global configurations and returns the updated CSS.
   * @param {Object} options - Options to update.
   * @returns {string} - The updated CSS rule(s) as a string.
   */
  updateGlobal(options = {}) {
    throw new Error('updateGlobal method must be implemented by the plugin.');
  }
}

// BorderPlugin Implementation
class BorderPlugin extends PluginInterface {
  constructor(options = {}) {
    super();
    this.size = options.size || '2px';
    this.color = options.color || '#000';
    this.borderRule = `
      .rect-region {
        border: var(--border-size, ${this.size}) solid var(--border-color, ${this.color});
      }
    `;
  }

  /**
   * Sets global CSS variables for border.
   * @param {HTMLElement} host - The shadow host element.
   */
  setGlobalVariables(host) {
    host.style.setProperty('--border-size', this.size);
    host.style.setProperty('--border-color', this.color);
  }

  /**
   * Provides the CSS rules for borders.
   * @returns {string} - The CSS rule(s).
   */
  getCSS() {
    return this.borderRule;
  }

  /**
   * Updates global configurations and returns the updated CSS.
   * @param {Object} options - Options to update.
   * @returns {string} - The updated CSS rule(s).
   */
  updateGlobal(options = {}) {
    if (options.size) this.size = options.size;
    if (options.color) this.color = options.color;
    this.borderRule = `
      .rect-region {
        border: var(--border-size, ${this.size}) solid var(--border-color, ${this.color});
      }
    `;
    return this.getCSS();
  }
}

// VertexPlugin Implementation
class VertexPlugin extends PluginInterface {
  constructor(options = {}) {
    super();
    this.size = options.size || '25px';
    this.color = options.color || '#3498db';
    this.vertexRule = `
      .rect-region::before {
        width: var(--vertex-size, ${this.size});
        height: var(--vertex-size, ${this.size});
        background-color: var(--vertex-color, ${this.color});
      }
    `;
  }

  /**
   * Sets global CSS variables for vertex.
   * @param {HTMLElement} host - The shadow host element.
   */
  setGlobalVariables(host) {
    host.style.setProperty('--vertex-size', this.size);
    host.style.setProperty('--vertex-color', this.color);
  }

  /**
   * Provides the CSS rules for vertices.
   * @returns {string} - The CSS rule(s).
   */
  getCSS() {
    return this.vertexRule;
  }

  /**
   * Updates global configurations and returns the updated CSS.
   * @param {Object} options - Options to update.
   * @returns {string} - The updated CSS rule(s).
   */
  updateGlobal(options = {}) {
    if (options.size) this.size = options.size;
    if (options.color) this.color = options.color;
    this.vertexRule = `
      .rect-region::before {
        width: var(--vertex-size, ${this.size});
        height: var(--vertex-size, ${this.size});
        background-color: var(--vertex-color, ${this.color});
      }
    `;
    return this.getCSS();
  }
}

// Rectangle Wrapper
class RectWrapper {
  /**
   * Creates a RectWrapper instance.
   * @param {HTMLElement} rect - The rectangle element.
   * @param {RectRegionShapeFactory} factory - Reference to the factory.
   */
  constructor(rect, factory) {
    this.rect = rect;
    this.factory = factory;
  }

  /**
   * Removes the rectangle from the DOM.
   */
  remove() {
    // Remove the rectangle from the DOM
    this.rect.remove();
  }

  /**
   * Updates the rectangle's properties and applies plugin-specific updates.
   * @param {Object} positionalOptions - New positional and size properties.
   * @param {Array} pluginUpdates - Array of plugin updates in the format [[PluginClass, options], ...].
   */
  update(positionalOptions = {}, pluginUpdates = []) {
    const { x, y, width, height } = positionalOptions;

    // Update position
    if (x !== undefined) {
      this.rect.style.left = typeof x === 'number' ? `${x}px` : x;
    }

    if (y !== undefined) {
      this.rect.style.top = typeof y === 'number' ? `${y}px` : y;
    }

    // Update size
    if (width !== undefined) {
      this.rect.style.setProperty('--width', typeof width === 'number' ? `${width}px` : width);
    }

    if (height !== undefined) {
      this.rect.style.setProperty('--height', typeof height === 'number' ? `${height}px` : height);
    }

    // Apply plugin-specific updates
    pluginUpdates.forEach(([PluginClass, options]) => {
      const plugin = this.factory.plugins.get(PluginClass);
      if (plugin) {
        // Update global CSS variables if per-rectangle variables are managed
        // Alternatively, you can implement per-rectangle plugin methods if needed
        // For this example, we'll assume that per-rectangle updates are handled via CSS variables
        if (plugin instanceof BorderPlugin || plugin instanceof VertexPlugin) {
          // Update per-rectangle CSS variables
          if (options.size !== undefined) {
            const varName = plugin instanceof BorderPlugin ? '--border-size' : '--vertex-size';
            this.rect.style.setProperty(varName, options.size);
          }
          if (options.color !== undefined) {
            const varName = plugin instanceof BorderPlugin ? '--border-color' : '--vertex-color';
            this.rect.style.setProperty(varName, options.color);
          }
        }
      } else {
        console.warn(`Plugin ${PluginClass.name} not found.`);
      }
    });

    // After updates, re-render CSS to ensure consistency
    // In this design, re-rendering is not necessary for per-rectangle updates
    // Only global updates require re-rendering
  }
}

// Rectangle Factory
class RectRegionShapeFactory {
  /**
   * Constructor to initialize and mount on a container with optional plugins.
   * @param {HTMLElement} container - The DOM element to mount the rectangles.
   * @param {Array<PluginInterface>} plugins - Array of plugin instances.
   */
  constructor(container, plugins = []) {
    if (!(container instanceof HTMLElement)) {
      throw new Error('Container must be a valid DOM element.');
    }

    this.container = container;
    this.plugins = new Map();

    // Create a shadow root on the container
    this.shadow = container.attachShadow({ mode: 'open' });

    // Initialize a style element inside the shadow DOM
    this.styleElement = document.createElement('style');
    this.shadow.appendChild(this.styleElement);

    // Initialize a container inside the shadow DOM to hold rectangles
    this.rectContainer = document.createElement('div');
    this.rectContainer.style.position = 'relative'; // Ensures absolute children are positioned correctly
    this.shadow.appendChild(this.rectContainer);

    // Register and initialize plugins
    plugins.forEach(plugin => {
      this.registerPlugin(plugin);
    });

    // Initially render all CSS
    this.renderCSS();
  }

  /**
   * Registers a plugin and sets up its global styles.
   * @param {PluginInterface} plugin - The plugin instance.
   */
  registerPlugin(plugin) {
    this.plugins.set(plugin.constructor, plugin);
    plugin.setGlobalVariables(this.shadow.host);
  }

  /**
   * Updates a plugin's global configurations.
   * @param {Function} PluginClass - The plugin's class.
   * @param {Object} options - Options to update.
   */
  updateGlobalPlugin(PluginClass, options = {}) {
    const plugin = this.plugins.get(PluginClass);
    if (plugin) {
      // Update the plugin's global configurations
      const updatedCSS = plugin.updateGlobal(options);

      // Re-render CSS
      this.renderCSS();
    } else {
      console.warn(`Plugin ${PluginClass.name} not found.`);
    }
  }

  /**
   * Aggregates CSS from all plugins and the base styles, then injects into the style element.
   */
  renderCSS() {
    let aggregatedCSS = `
      :host {
        /* Global styles can be added here */
      }

      .rect-region {
        position: absolute;
        width: var(--width, 100px);
        height: var(--height, 100px);
        box-sizing: border-box;
      }

      .rect-region::before {
        content: '';
        position: absolute;
        width: var(--vertex-size, 25px);
        height: var(--vertex-size, 25px);
        background-color: var(--vertex-color, #3498db);
        box-sizing: border-box;

        /* Intermediate variables */
        --offset: calc(-0.5 * (var(--border-size, 2px) + var(--vertex-size)));
        --adjusted-width: calc(var(--width) - var(--border-size, 2px));
        --adjusted-height: calc(var(--height) - var(--border-size, 2px));

        /* Positioning the first vertex */
        top: var(--offset);
        left: var(--offset);

        /* Creating three more vertices using box-shadow, positioned at each corner */
        box-shadow:
          var(--adjusted-width) 0 0 0 var(--vertex-color),
          var(--adjusted-width) var(--adjusted-height) 0 0 var(--vertex-color),
          0 var(--adjusted-height) 0 0 var(--vertex-color);
      }
    `;

    // Append CSS from all plugins
    this.plugins.forEach(plugin => {
      aggregatedCSS += plugin.getCSS() + '\n';
    });

    this.styleElement.textContent = aggregatedCSS;
  }

  /**
   * Creates and appends a rectangle wrapped with plugins.
   * @param {number} x - The left position in pixels relative to the container.
   * @param {number} y - The top position in pixels relative to the container.
   * @param {number} width - Width of the rectangle in pixels.
   * @param {number} height - Height of the rectangle in pixels.
   * @returns {RectWrapper} - The wrapper object managing the rectangle.
   */
  createRect(x, y, width, height) {
    // Create the rectangle div
    const rect = document.createElement('div');
    rect.classList.add('rect-region');

    // Set position relative to the shadow container
    rect.style.left = `${x}px`;
    rect.style.top = `${y}px`;

    // Set width and height via CSS variables
    rect.style.setProperty('--width', `${width}px`);
    rect.style.setProperty('--height', `${height}px`);

    // Append the rectangle to the shadow DOM's container
    this.rectContainer.appendChild(rect);

    // Instantiate the wrapper with reference to this factory and the rectangle
    const rectWrapper = new RectWrapper(rect, this);
    return rectWrapper;
  }
}

// Usage Example

// Instantiate plugins
const plugins = [
  new BorderPlugin({ size: '3px', color: '#2c3e50' }),
  new VertexPlugin({ size: '20px', color: '#e74c3c' })
];

// Get the container element
const container = document.getElementById('rectangle-container');

// Instantiate the factory with plugins
const factory = new RectRegionShapeFactory(container, plugins);

// Create multiple rectangles with different properties
const rect1 = factory.createRect(50, 50, 200, 100);
const rect2 = factory.createRect(300, 150, 250, 150);
const rect3 = factory.createRect(600, 80, 180, 120); // Uses plugin defaults

// Example: Update rect1 after 2 seconds
setTimeout(() => {
  rect1.update(
    { x: 60, y: 60, width: 220, height: 120 },
    [
      [BorderPlugin, { size: '4px', color: '#8e44ad' }],
      [VertexPlugin, { size: '25px', color: '#2980b9' }]
    ]
  );
}, 2000);

// Example: Remove rect2 after 4 seconds
setTimeout(() => {
  rect2.remove();
}, 4000);

// Example: Update global plugin settings after 6 seconds
setTimeout(() => {
  factory.updateGlobalPlugin(BorderPlugin, { size: '5px', color: '#e67e22' });
  factory.updateGlobalPlugin(VertexPlugin, { size: '30px', color: '#f1c40f' });

  // Create a new rectangle to see updated global settings
  const rect4 = factory.createRect(100, 300, 150, 150);
  const rect5 = factory.createRect(400, 350, 200, 100);
}, 6000);
```

notice rectwrapper doing 
```
    pluginUpdates.forEach(([PluginClass, options]) => {
      const plugin = this.factory.plugins.get(PluginClass);
      if (plugin) {
        // Update global CSS variables if per-rectangle variables are managed
        // Alternatively, you can implement per-rectangle plugin methods if needed
        // For this example, we'll assume that per-rectangle updates are handled via CSS variables
        if (plugin instanceof BorderPlugin || plugin instanceof VertexPlugin) {
          // Update per-rectangle CSS variables
          if (options.size !== undefined) {
            const varName = plugin instanceof BorderPlugin ? '--border-size' : '--vertex-size';
            this.rect.style.setProperty(varName, options.size);
          }
          if (options.color !== undefined) {
            const varName = plugin instanceof BorderPlugin ? '--border-color' : '--vertex-color';
            this.rect.style.setProperty(varName, options.color);
          }
        }
      } else {
        console.warn(`Plugin ${PluginClass.name} not found.`);
      }
    });
```
which is plain wrong, why? it is setting plugin internal css on its own. instead, it should invoke a method on plugin which would set the per-rect parameters.