shadow-dom 相关问题

Shadow DOM是Web Components的关键部分，它允许您使用与主DOM隔离的DOM元素子树创建基于组件的应用程序。

两天以来，我一直在努力解决聊天气泡覆盖我的主题底部登录/退出网络应用栏的问题：尝试：在Wordpress中修改子style.css和functions.php

button jquery-selectors chat shadow-dom 3cx

回答 1 投票 0

主题风格不适用在 style.css 中修改了主题风格不适用在style.css中修改了 `/* Theme Name: Alukas child Theme URI: Description: Tema child di Alukas Author: admin Author URI: https://monbi.it Template: alukas Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html /* == Add your own styles below this line == --------------------------------------------*/ #wplc-chat-button {bottom: 100px!important} ` function add_custom_js() { ?> <script type="text/javascript"> function querySelectorAllShadows(selector, el = document.body) { // recurse on childShadows /** * Finds all elements in the entire page matching `selector`, even if they are in shadowRoots. * Just like `querySelectorAll`, but automatically expand on all child `shadowRoot` elements. * @see https://stackoverflow.com/a/71692555/2228771 */ const childShadows = Array.from(el.querySelectorAll('*')). map(el => el.shadowRoot).filter(Boolean); // console.log('[querySelectorAllShadows]', selector, el, `(${childShadows.length} shadowRoots)`); const childResults = childShadows.map(child => querySelectorAllShadows(selector, child)); // fuse all results into singular, flat array const result = Array.from(el.querySelectorAll(selector)); return result.concat(childResults).flat(); } jQuery(document).ready(function(){ setTimeout(function() { // sposta la bubble chat // Sposta il div #callus-container var allMatches = querySelectorAllShadows('#wp-live-chat-by-3CX'); if(allMatches && allMatches.length > 0){ var callusContainer = jQuery(allMatches[0]); // Prendi il primo match if(window.innerWidth <= 430) { callusContainer.css({'position':'fixed','bottom':'105px','right':'5px'}); } } }, 3000); // 3 secondi di ritardo }); </script> <?php } add_action('wp_head', 'add_custom_js', 100);

button jquery-selectors chat shadow-dom 3cx

回答 1 投票 0

需要帮助找到 Shadow dom 元素的正确 css 选择器

我正在寻找下载按钮的CSS选择器。它位于 Shadow dom 元素中。当我试图找到它时遇到一些问题。这就是我在 js 执行器中所做的返回

selenium-webdriver css-selectors selenium-chromedriver shadow-dom

回答 1 投票 0

ViewEncapsulation.Emulated 样式由 ViewEncapsulation.(Native|ShadowDom) 组件复制到 #shadow-root 中

我有一个示例存储库 https://github.com/collinstevens/angular-encapsulation 它演示了我的问题。共有三个组件：EmulatedComponent、NativeComponent 和 ShadowDomCompo...

angular web-component shadow-dom

回答 3 投票 0

如何使用 React 将数据插入到 Shadow dom 中？

我正在尝试使用 React 将数据插入到 Shadow dom 中。下面的代码曾经可以工作，但是当对其他代码进行“不相关”的更改时，它就停止工作了。我认为问题在于...

reactjs shadow-dom

回答 2 投票 0

是否可以从外部脚本将事件监听器绑定到shadow dom内的元素？

我有一个 chrome 扩展，它将一个 Shadow dom 元素注入到页面中以保持 css 分离。但我需要从内容脚本将 onclick 绑定到 Shadow dom 中的某些元素，因为我......

javascript google-chrome dom content-script shadow-dom

回答 3 投票 0

为什么在 Shadow DOM 中像 `:where(:root, :host) { --my-var: value }` 这样定义的 CSS 变量不起作用？

我注意到我在 Web 组件（使用 Shadow DOM）中定义的一些 CSS 变量没有按预期运行。看来使用 :where(:root, :host) 导致了该问题。 W...

css web-component shadow-dom web-frontend css-variables

回答 1 投票 0

如何通过shadow DOM访问light DOM中slot内的特定html标签？

我创建了一个自定义元素并在 html 中定义它，如下所示： ` &... 我创建了一个自定义元素并在 html 中定义它，如下所示： ` <header> <custom-navbar links="[{title:'home'},{title:'About'}]" class="bg-purple"> <h1 slot="logo"> Amazon </h1> <navbar slot="link" class="navbar-wrapper"> <ul class="link-container"> </ul> </navbar> </custom-navbar> </header> ` 我定义了我的自定义元素，如下所示： class CustomNavbar extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); this.shadowRoot.innerHTML = ` <style> :host(.bg-purple){ display:flex; width:100%; background-color:purple !important; } .container{ display:flex; flex-direction:row; margin:1rem; align-items:center; } </style> <div class='container'> <div> <slot name="logo"></slot> </div> <slot name='link'></slot> </div> `; } connectedCallback() { this._links = this.getAttribute("links"); } } customElements.define("custom-navbar", CustomNavbar); 我正在寻找在 Shadow DOM 中获取 light DOM 中定义的 links 属性并将链接添加到 ul 元素？我还在 document.querySelector("custom-navbar").querySelector("ul") 内部使用了 :connectedCallback()，但它无法正常工作。尝试此代码，它通过使用自定义元素的 HTML 中提供的 links 属性在影子 DOM 中动态创建并填充链接列表。 class CustomNavbar extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); this.shadowRoot.innerHTML = ` <style>:host(.bg-purple){display:flex;width:100%;background-color:purple!important;}.container{display:flex;flex-direction:row;margin:1rem;align-items:center;}</style> <div class='container'><div><slot name="logo"></slot></div><slot name='link'></slot></div> `; } connectedCallback() { const links = JSON.parse(this.getAttribute("links") || '[]'); const ulElement = this.shadowRoot.querySelector("ul.link-container"); links.forEach(linkInfo => { const liElement = document.createElement("li"); liElement.textContent = linkInfo.title; ulElement.appendChild(liElement); }); } } customElements.define("custom-navbar", CustomNavbar); 希望它有效:) connectedCallback 在 opening 标签上触发；所以现阶段还没有解析的 lightDOM （除非CE是在DOM解析之后定义的）所以你要么：在 setTimeout 中使用 connectedCallback 来推迟在 lightDOM 中查询 <ul> 标签在组件上添加一个 insertLI 方法来检查/等待 <ul> 存在 setTimeout是完全有效的，除非你有一个非常大的lightDOM（比如> 750个DOM节点）然后添加HTML解析元素代码注： super(); this.attachShadow({ mode: "open" }); this.shadowRoot.innerHTML = `...` 可以链接到： super() // sets AND returns 'this' scope .attachShadow({ mode: "open" }) // sets AND returns this.shadowRoot .innerHTML = `...`

javascript web-component shadow-dom

回答 2 投票 0

如何让CSS-in-JS与需要附加一些元素的shadow DOM一起工作？

我正在使用 Shadow dom 在 WordPress + React 中开发 antd。 antd 的 styles 标签附加在 head 标签上。但我希望它们追加到影子 dom 中。我使用了antd文档中的代码...

dom append antd shadow shadow-dom

回答 1 投票 0

Web 组件 #shadow-root css 泄漏到文档

我对Web组件的理解是，你可以用它来防止CSS从Web组件泄漏到父组件。我正是需要这个，但由于某种原因，Web 组件内部的样式会影响......

html css web-component shadow-dom

回答 2 投票 0

有没有一种方法可以在不使用 Shadow DOM 的情况下向 <slot> 添加类似 <template> 的元素？

为了遵守 DRY 原则，我想创建一个基于的自定义组件。代码看起来像这样（请原谅我在输入此内容时的偷工减料... 为了遵守 DRY 原则，我想创建一个基于 <template> 的自定义组件。代码看起来像这样（请原谅我在通宵达旦后在手机上打字时的偷工减料）： // base.html <template id="player"> <div class="card"> <div class="card-body"> <slot name="user-username"></slot> </div> </div> </template> // app.js class PlayerCard extends HTMLElement { constructor(){ super(); let tmpl = querySelector...; this.appendChild(tmpl.content.cloneNode(); } } define('player-card', PlayerCard); // index.html {% for user in users %} <player-card> <div slot="user-username">{{ user }}</div> </player-card> {% end for %} 但是在梦想破灭和长时间的研究之后，我了解到插槽只能在 Shadow DOM 中使用。使用 SDOM 的问题是内部样式受到保护，不能直接受外部 CSS 影响。这意味着，一方面，我无法将数据注入到模板实例中，也无法在不重新实现 Bootstrap 的情况下使用 Shadow DOM。我被困住了。对我的大脑来说，一定有一种方法可以实现这一点，但我的大脑无法找到它 - 要么因为它太复杂，要么因为它太琐碎和容易。请问有什么建议吗？是的，<SLOT>s只能在shadowDOM内部使用但是您可以使用样式槽做更多事情。有关详细答案，请参阅：::用于shadowDOM插槽中嵌套子项的开槽CSS选择器 customElements.define('player-card', class extends HTMLElement { constructor() { let template = (id) => document.getElementById(id).content.cloneNode(true); super() .attachShadow({mode: 'open'}) .append(template(this.nodeName)); this.onclick = (evt) => this.style.color='blue'; } }); /* GLOBAL CSS */ player-card { /* inheritable styles trickle down into shadowDOM */ font: 20px Arial; color: green; } [slot="username"] { /* lightDOM styles are REFLECTED to SLOTs */ width: 200px; border: 2px solid green; } <template id="PLAYER-CARD"> <style shadowDOM-CSS > div { /* styles do not style content in SLOTs */ padding: 1em; background:gold; } ::slotted(*) { /* slotted can only style the lightDOM 'skin' */ background: lightgreen; } </style> <div> <slot name="username"></slot> </div> </template> <player-card>  <div slot="username">Ahmed</div> </player-card> <player-card>  <div slot="username">Danny</div> </player-card> Danny 是对的，但还值得一提的是外部样式表可以通过 Web 组件使用 100% 原始代码导入。您的组件可以访问该样式表的规则，对于敏锐的开发人员来说，您会很高兴知道浏览器将从其缓存中获取它，而不是发出另一个请求（假设之前已下载）。像这样：  <template> <p>I'm salmon colored!</p> <button ord="primary">Primary button styles come from the imported stylesheet</button> <div class="fnt-bold">Bold class also comes from the imported stylesheet</div>  <style> /* Importing global stylesheets will penetrate shadow DOM. Browsers use cached file if already downloaded. */ @import "https://unpkg.com/[email protected]/dist/m-min.css"; /* :host selects the custom element, i.e. <x-counter>, not the template. */ :host { display: block } /* Anything else is scoped to this template. */ p { color: lightsalmon } </style> </template> 完整示例：https://github.com/jfbrennan/single-file-web-component/blob/master/x-counter.html#L15 我不记得在哪里学到了有关导入的知识，但如果我能找到资源，我会更新我的答案。

javascript html web-component shadow-dom

回答 2 投票 0

修改 ion-datetime 按钮 css 属性

我想将日期时间按钮的按钮文本转换属性更改为无。现在我的按钮看起来像这样：按钮1 根据 Ionic 文档，我无法访问

css ionic-framework shadow-dom

回答 1 投票 0

CSS 属性通过 Shadow DOM 传递的极端情况，即使 :host {all:initial}

这可能是我在 Stack 上的第一个问题！尽管这里提出了著名的修复方案，但我发现了我认为通过影子 DOM 传递 CSS 属性的一个极端情况。一般背景我是建立...

javascript html css inheritance shadow-dom

回答 1 投票 0

我们如何覆盖影子根中的CSS？

我有一些用于 span 标签的 CSS。所有这些都在 Shadow-root 内部渲染。如下所示。 .class-name-a .class-name-b > span { 左边框：var(--css-token-right-statem...