在 Shadow DOM 中进行 Preact 但丢失了所有样式

发布于 2025-01-10 15:52:35 字数 896 浏览 1 评论 0原文

我正在构建一个小部件，因此希望在影子 DOM 中加载小部件 Preact 应用程序以避免 CSS 冲突。

我能够成功地做到这一点。

 const host = document.querySelector('#widget-_hw');
 const shadow = host?.attachShadow({ mode: 'open' });
 const renderIn = document.createElement('div');
 shadow?.appendChild(renderIn);
 render(h(App, { ...config, element: el }), renderIn)

但失去了所有的风格。

我在一个名为 main.css 的文件中拥有 Widget 所需的所有样式。我在哪里定义了这样的所有样式


reset {
  composes: scope;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  margin: 0;
}

.reset h1,
.reset h2,
.reset h3,
.reset h4,
.reset h5,
.reset h6 {
  line-height: var(--line-height);
}

//and many other like button, input fields, containers etc

有人可以建议我一种将样式元素导入回 preact 应用程序的方法吗？

原文

I'm building a widget and hence wanted to load the widget Preact app in the shadow DOM to avoid CSS conflicts.

I am succesfully able to do so like this.

 const host = document.querySelector('#widget-_hw');
 const shadow = host?.attachShadow({ mode: 'open' });
 const renderIn = document.createElement('div');
 shadow?.appendChild(renderIn);
 render(h(App, { ...config, element: el }), renderIn)

But lost all styles.

I have all styles required for Widget inside a file called main.css. Where I have all styles defined like this


reset {
  composes: scope;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  margin: 0;
}

.reset h1,
.reset h2,
.reset h3,
.reset h4,
.reset h5,
.reset h6 {
  line-height: var(--line-height);
}

//and many other like button, input fields, containers etc

Could someone suggest me a way to import style elements back into the preact app?

分享到QQ

分享到微博