在阴影DOM中预演，但丢失了所有样式

Question

我正在构建一个小部件，因此希望在影子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应用程序中的方法吗？

Answer 1

shadowDOM的全部目的是不采用全局/外部CSS的样式。

ShadowDOM的样式如下：

• <style>

• 可继承样式

https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/

• (级联) CSS属性

• shadowParts (和主题)

https://meowni.ca/posts/part-theme-explainer/

• <slot>是反射的，它们不是由shadowDOM设计的，而是由它的容器设计的。

请参阅：::slotted content

• (2022年2月)可构造StyleSheets仍然是只含铬的政党

https://caniuse.com/mdn-api_cssstylesheet_cssstylesheet

• 您的自定义指令