我正在使用 Shadow dom 在 WordPress + React 中开发 antd。 antd 的 styles 标签附加在 head 标签上。但我希望它们追加到影子 dom 中。我使用了 antd 文档中的代码，但这在我的 WordPress 网站上不起作用。在这里，我给出了我的控制台元素的示例。
<head>
<style data-rc-order="prependQueue" data-css-hash="b38o0g" data-token-hash="5unovc">
:where(.css-z9xyz9)[class^="ant-drawer"],
:where(.css-z9xyz9)[class^="ant-drawer"] [class^="ant-drawer"]::before,
:where(.css-z9xyz9)[class*=" ant-drawer"] [class*=" ant-drawer"]::after {
box-sizing: border-box;
}
:where(.css-z9xyz9).ant-drawer .ant-drawer-close {
display: inline-block;
margin-inline-end: 12px;
color: rgba(0, 0, 0, 0.45);
font-weight: 600;
font-size: 16px;
font-style: normal;
line-height: 1;
}
</style>
<style data-rc-order="prependQueue" data-css-hash="1vl0t8n" data-token-hash="5unovc">
:where(.css-z9xyz9) a {
color: #1677ff;
text-decoration: none;
background-color: transparent;
outline: none;
cursor: pointer;
transition: color 0.3s;
-webkit-text-decoration-skip: objects;
}
:where(.css-z9xyz9) a:hover {
color: #69b1ff;
}
</style>
<style data-rc-order="prependQueue" data-css-hash="ux9z8n" data-token-hash="5unovc">
:where(.css-z9xyz9)[class^="ant-col"],
:where(.css-z9xyz9)[class^="ant-col"]::before,
:where(.css-z9xyz9)[class*=" ant-col"]::before,
:where(.css-z9xyz9)[class^="ant-col"]::after,
:where(.css-z9xyz9)[class*=" ant-col"]::after {
box-sizing: border-box;
}
</style>
</head>
此样式标签附加在 head 标签中。我如何将它们附加到我的影子 dom 中？
我使用的js代码来自antd官网。
import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs';
import { createRoot } from 'react-dom/client';
const shadowRoot = someEle.attachShadow({ mode: 'open' });
const container = document.createElement('div');
shadowRoot.appendChild(container);
const root = createRoot(container);
root.render(
<StyleProvider container={shadowRoot} hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
<MyApp />
</StyleProvider>,
);
但是样式标签仍然附加在 head 元素中。我希望将它们附加到我的影子 dom 中。
我使用了antd cdn，并且必须在shadow dom中插入外部风格的元素。我只是操纵了cdn代码。我用了window.shadow ||文档.querySelector(“正文”)。这对我有用。