Stylus Shadow DOM Support

Make Stylus styles also be applied to Shadow DOM elements.

< Feedback on Stylus Shadow DOM Support

Review: Good - script works

§
Posted: 08-07-2024

Sir, your code does not work when the ShadowDOM on the other side is created by the Chrome plugin. It may be a problem with the loading timing.

If you need to fix it, you need to add this paragraph:


function applyStylus() {
  const ss = document.querySelectorAll('html>style[id^="stylus-"]');
  const allShadowHosts = document.querySelectorAll('*');
  allShadowHosts.forEach(e => {
    if (!e.shadowRoot) return;
    Array.from(e.shadowRoot.children).forEach(el => chkNode(el) && el.remove());
    ss.forEach(el => e.shadowRoot.append(el.cloneNode(true)));
  });
}


Post reply

Sign in to post a reply.