Style not injected when no existing style element present in shadow DOM

[cns-dan]

  const root = shadowRootElement.shadowRoot;
  let styleAlreadyAdded = false;
  const currentStyleTags = Array.from(root.querySelectorAll('style'));
  currentStyleTags.forEach((element: HTMLStyleElement, index) => {
    if (element.innerHTML === styles) {
      styleAlreadyAdded = true;
    }
    if (currentStyleTags.length - 1 === index && styleAlreadyAdded === false) {
      const newStyleTag = document.createElement('style');
      newStyleTag.innerHTML = styles;
      root.insertBefore(newStyleTag, root.querySelector(insertBeforeSelector));
    }
  });

If there are no style elements already within the shadow DOM, currentStyleTags will be an empty array and the code path that conditionally injects the new styles never executes.

[ChristopherTotty]

A fix for this problem if anyone wants to run with it.

    public injectStyles(
        shadowRootElement: HTMLElement,
        insertBeforeSelector: string,
        styles: string
    ) {
        const root = shadowRootElement.shadowRoot;
        let styleAlreadyAdded = false;
        const currentStyleTags = Array.from(root.querySelectorAll('style'));
        currentStyleTags.forEach((element: HTMLStyleElement, index) => {
            if (element.innerHTML === styles) {
                styleAlreadyAdded = true;
            }
        });

        if (styleAlreadyAdded === false) {
            const newStyleTag = document.createElement('style');
            newStyleTag.innerHTML = styles;
            root.insertBefore(newStyleTag, root.querySelector(insertBeforeSelector));
        }
    }