shadow-dom 相关问题

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

如何使用cypress.io检查嵌套阴影元素

如何定位位于嵌套 Shadow DOM 内部的搜索框? 到目前为止,我已经尝试了几种不同的方法来定位,下面是其中之一,但它不起作用: 定位器: //阴影...

回答 2 投票 0

无法在 Shadow DOM 中跨元素选择文本

我目前正在 a 中使用属性 contenteditable=true 的自定义元素。 然而,我遇到了 Shadow DOM 的问题,因为它似乎阻止我选择文本

回答 1 投票 0

如何从包含在 Shadow DOM 内的另一个 Web 组件定位到 Shadow DOM 内的元素

嗯,我不确定问题标题是否已经表达清楚......抱歉。 我想展示一个我已经在 DOM 上使用且没有问题的 wc-tooltip: 您可以使用 嗯,我不确定问题标题是否已经说清楚了……抱歉。 我想展示一个 wc-tooltip 我已经在 DOM 上使用而没有任何问题: <div> You can use <span class="disk-space" id="help">20GB</span> of space. <wc-tooltip target="help">It works only if you are a vampire.</wc-tooltip> </div> 我尝试在影子 DOM 的 Web 组件中使用它,但它不起作用: <Host> <span><slot/></span> { this.tip && <wc-icon id="help" name="my/fantastic/help/icon" /> <wc-tooltip target="help">{ this.tip }</wc-tooltip> } </Host> 这是因为我正在寻找 DOM 中的元素,而不是影子 DOM: componentDidRender (): void { const caller = document.getElementById(this.target) if (caller) { this.caller = caller this.caller.addEventListener('mouseleave', this.handleVisibility.bind(this, false)) this.caller.addEventListener('mouseenter', this.handleVisibility.bind(this, true)) return } console.error('Warning: property target is undefined.') } 显然,document.getElementById(this.target)无法工作。 问题是我没有弄清楚如何解决这个问题,我可以使用替代属性来指向shadow DOM元素,但是如何解决? IMO 设计的组件期望从组件外部访问它们的影子 DOM 内容(除了通过公共 API(如 @Methods))是不正确的设计。在这种情况下,我建议 wc-tooltip 应在插槽中包含 wc-icon,而不是成为同级组件(或创建一个单独的组件来包含两者),并且还保存工具提示显示逻辑。实际可见的“工具提示”只是影子 DOM 的一部分,而不是整个组件,它实际上只是图标(或其他任何东西)的包装器,用于侦听鼠标活动以显示/隐藏可见的工具提示。所以类似: <Host> <span><slot/></span> { this.tip && <wc-tooltip> <wc-icon slot="trigger" id="help" name="my/fantastic/help/icon" /> <div slot="tooltip">{ this.tip }</div> </wc-tooltip> } </Host> wc-工具提示: @State() tooltipVisible: boolean = false; @Listen('mouseenter') showTootlip() { this.tooltipVisible = true; } @Listen('mouseleave') hideTooltip() { this.tooltipVisible = false; } render() { return <Host> <slot name="trigger" /> <div style={{ display: this.tooltipVisible ? 'block' : 'none', position: 'absolute', left: ... }}> <slot name="tooltip" /> </div> </Host>; }

回答 1 投票 0

自定义元素 + Shadow Dom - 为命名槽的最后一个子元素设置样式

我正在尝试将样式应用于指定插槽的最后一个子级,并且正在努力获取正确的选择器。 本质上,last-child 似乎适用于 light DOM,而不是 Shadow DOM,...

回答 1 投票 0

Cypress - 如何迭代元素并过滤掉具有 Shadow dom 的元素?

我有一个包含许多元素的页面,其中五个是属性为零的div元素。这五个 div 中的每一个都有一个 Shadow root/shadow dom。我只对五个带有

回答 1 投票 0

CSS :part 伪选择器可以用于设置嵌套 Web 组件的样式吗?

使用 Shadow DOM 创建具有封装样式的 Web 组件时,可以使用 ::part 伪选择器来设置部分阴影标记的样式(https://developer.mozilla.org/en-US/docs/Web/CSS/ ::

回答 2 投票 0

shadow dom ::part 元素的样式子元素

我有一个 Web 组件,可以在 Shadow dom 中呈现以下内容: #shadow根 我就是标题文字! ...

回答 1 投票 0

封闭影子根内的沙盒事件

我的文档中有一个封闭的影子根,它代表包含敏感信息的自定义控件,但是似乎(尽管已关闭)事件仍会从 sh 中冒出...

回答 1 投票 0

选择下拉菜单下的影子根元素

无法使用 selenium Java 选择下拉列表下存在的影子根元素。 尝试使用JS路径,但id不断动态变化,因此无法选择它。 文档.querySelector(&

回答 1 投票 0

修改 Shadow DOM 中的 CSS

我有一个由第三方创建的影子 DOM。我想将 Shadow DOM 内带有 .controls 类的 div 的显示设置为 none。我怎样才能通过 CSS 实现这一点? 我有一个由第三方创建的影子 DOM。我想将 Shadow DOM 内具有类 display 的 div 的 .controls 设置为 none。我怎样才能通过 CSS 实现这一点? <div class="documentation__design"> <figspec-file-viewer> #shadow-root (open) <div class="controls"> <select></select> </div> <div class="view"></div> </figspec-file-viewer> </div> 你必须直接进入shadowRoot,获取.controls元素并设置内联样式 document .querySelector("figspec-file-viewer") .shadowRoot .querySelector(".controls") .style .display = "none"; 或者在shadowRoot中添加一个<style>标签: document .querySelector("figspec-file-viewer") .shadowRoot .append( Object.assign( document.createElement("STYLE") , { innerHTML = `.controls { display : "none"; }` } )// Object.assign )// append 正如评论中提到的,part可以做到。 通过上述方法,您可以在 DOM 元素 inside ShadowDOM 上设置 part attribute,然后使用 global CSS 对其进行样式设置。

回答 1 投票 0

我想单击 Python Selenium 中的下一个元素。由于shadow dom,我无法点击。我该怎么办?

我想单击 Python Selenium 中的下一个元素。 由于shadow dom,我无法点击。我应该怎么办? 我的代码是这样的,对应的html是这样的 在此输入图像描述 浏览...

回答 1 投票 0

3cx 更改 WordPress Functions.php 中的气泡按钮样式 - 向上移动异步按钮并在等待创建的异步 dom 获取后对其进行样式设置

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

回答 1 投票 0

3cx 更改气泡按钮样式 - 向上移动异步按钮并在等待创建异步 dom 的获取后为其设置样式

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

回答 1 投票 0

3cx 更改气泡按钮样式 - 向上移动异步按钮并设置其样式等待创建异步 dom

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

回答 1 投票 0

3cx 更改气泡按钮样式 - 向上移动

主题风格不适用 在 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);

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 3 投票 0

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

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

回答 2 投票 0

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

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

回答 3 投票 0

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

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

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.