Can I either get nord theme as string or select where to inject?

[ghost]

It would be useful for a Web Component, where shadow DOM encapsulates its styles.

Using Vite, when dynamically importing a module that imports the Editor + theme, it injects into head element. Not entirely desired but I think I can work around this. This is out of scope of your project of course; just saying... :]

[ghost]

Getting the styles by string seems a reasonable idea, but since you're using emotion package, I can't do something like import css from 'nord-theme.css?inline' (vitejs/vite#3246) nor could I do some external styling. 🤔

[Saul-Mirone]

Seems emotion has a config props here: https://emotion.sh/docs/@emotion/cache#container
I need to make it can be configured.
Will add this in todo list.

[ghost]

Thank you!
In the mean time, I'm using this hack:

const watchStyles = (customElement: HTMLElement) => {
  const sourceStylesContainer = document.head;

  const moveStyles = (
    mutations: MutationRecord[],
    observer: MutationObserver
  ) => {
    for (const record of mutations) {
      const elements = Array.from(record.addedNodes).filter(
        (tag) =>
          tag.nodeName.toLowerCase() === 'style' &&
          (tag as HTMLElement).dataset.emotion
      );
      const styleTag = document.createElement('style');
      const contents = elements.reduce((prev, curr) => prev + curr.textContent, '');
      styleTag.innerHTML = contents;

      customElement.shadowRoot?.appendChild(styleTag);
    }
  };
  const observer = new MutationObserver(moveStyles);
  observer.observe(sourceStylesContainer, {
    characterData: true,
    childList: true
  });
};

Heavily edited from this: https://tinloof.com/blog/using-css-files-in-web-components/ (which doesn't work for me).

[ghost]

Just an update to my use case: so, having many (and I mean many) style elements within one web component's shadow root, was, unpleasing to say the least... I ended up copying all the generated content from the Nord theme with: let s = ''; for (const t of Array.from(myElement.shadowDom.querySelectorAll('style'))) s += t.textContent;, and then pasted into a stylesheet of its own, theme.css, for instance. And now, I can use the same stylesheet for all web components, like so:

class CustomElement extends HTMLElement {
  static css = new URL('../styles/theme.css', import.meta.url).href;

  async #preRender(): Promise<string> {
    return `
    <link rel="stylesheet" href="${CustomElement.css}">`;
  }
}

No more extra copies and one (cached, of course) network request!

[Saul-Mirone]

Emotion now can be configure, implemented by PR: #279

Add style to a specific DOM element now is posssible.