shadow-dom 相关问题

我无法更改CSS变量（--color），因为shadowRoot querySelector不会返回：host或html ：主机{显示：块； --颜色: ${this.color}; } .</desc> <question vote="0"> <p>我无法更改CSS变量（<pre><code>--color</code></pre>），因为shadowRoot querySelector不会返回<pre><code>:host</code></pre>或<pre><code>html</code></pre></p> <pre><code><style> :host {display: block; --color: ${this.color}; } .colored { color: var(--color); } </style> </code></pre> <p>这会破坏（querySelector 返回 <pre><code>null</code></pre>）</p> <pre><code>this.shadowRoot.querySelector(':host').style.setProperty('--color', value); </code></pre> <p>这改变了<pre><code>color</code></pre>但不是我想要的</p> <pre><code>this.shadowRoot.querySelector('.colored').style.setProperty('color', value); </code></pre> <p>最后，这个尝试成功了，但只有当 <pre><code>:host</code></pre> 是第一条规则并且位于第一个样式表中时它才会起作用。</p> <pre><code>this.shadowRoot.styleSheets[0].rules[0].style.setProperty('--color', value); </code></pre> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <body> <my-element></my-element> <script> class MyElement extends HTMLElement { constructor() { super(); this._color = "green"; this._shadowRoot = this.attachShadow({ mode: "open" }); this._shadowRoot.innerHTML = ''; this._shadowRoot.appendChild(this.template().content.cloneNode(true)); } template() { const template = document.createElement("template"); template.innerHTML = ` <style> :host {display: block; --color: ${this.color}; } .colored { color: var(--color); } </style> <p>The color will change in 2 seconds: <span id="color" class="colored">${this.color}</span></p> `; return template; } get color() { return this._color; } set color(value) { this._color = value; this.shadowRoot.getElementById('color').innerHTML = value; // ▼ 👉🏻 Uncomment below. Cannot change --color variable; selector returns null // this.shadowRoot.querySelector(':host').setProperty('--color', value); // ▼ This works but is not what I want. I need to change the variable //this.shadowRoot.querySelector('.colored').style.setProperty('color', value); // ▼ This is subject to the firts stylesheet and :host being first rule this.shadowRoot.styleSheets[0].rules[0].style.setProperty('--color', value); } } customElements.define("my-element", MyElement); setTimeout(() => { document.querySelector('my-element').color = 'blue'; }, 2000); </script> </body> </html></code></pre> </div> </div> <p></p> <p>谢谢！</p> </question> <answer tick="true" vote="4"> <p><pre><code>:host</code></pre> 指的是您的 <pre><code><my-element></code></pre></p> <p>因此，请在 <pre><code>my-element</code></pre> 上设置属性： <pre><code>this.style.setProperty('--color', value);</code></pre></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><my-element></my-element> <script> customElements.define("my-element", class extends HTMLElement { constructor() { super() .attachShadow({mode: "open"}) .innerHTML = `<style> :host { --color: red } .colored { color: var(--color) } </style> <p>The color will change in 2 seconds: <span id="color" class="colored">${this.color}</span></p>`; this.color = "green"; } get color() { return this._color; } set color(value) { this._color = value; this.shadowRoot.getElementById('color').innerHTML = value; this.style.setProperty('--color', value); } }); setTimeout(() => document.querySelector('my-element').color = 'blue', 2000); </script></code></pre> </div> </div> <p></p> </answer> </body></html>

web-component shadow-dom native-web-component shadow-root

回答 0 投票 0

如何向shadow dom添加keydown监听器

我一直在尝试为特定 Web 组件的 keydown 事件实现一个事件侦听器。事件监听器应该放置在Web组件中，这样它就可以在其他项目中使用...

javascript html events web-component shadow-dom

回答 1 投票 0

需要设置mapkit JS标记注释的样式

我有一个Mapkit JS地图，标记注释是交互式的，但没有cursor:pointer样式，所以我需要添加它。标记注释位于自定义元素内部并位于阴影中...

javascript shadow-dom mapkit-js

回答 1 投票 0

未应用样式化组件样式

我有一个反应弹出窗口，它使用样式组件进行样式设置。我正在 Shadow dom 中渲染 React 应用程序。因为我不想让任何其他 css 文件修改弹出窗口。它适用于大多数网站，除了...

javascript css reactjs styled-components shadow-dom

回答 1 投票 0

访问封闭影子 DOM 内的元素

有没有可能使用 Puppeteer 访问封闭影子 DOM 内的元素？我知道封闭 Shadow DOM 的目的是让项目不可访问，但由于 Puppeteer 是......

javascript puppeteer shadow-dom

回答 1 投票 0

使用shadow dom在Safari中隐藏html5视频中的全屏按钮

我想在Safari浏览器中隐藏HTML5视频控件中的全屏按钮。我找到了 Shadow dom 元素...，其中包含...

css html5-video shadow-dom

回答 1 投票 0

空手道 UI 中的 ShadowRoot 输入文本框访问问题

我试图将文本插入到标识为“streetAddress.unitNumber”的输入框中，但无法做到。该元素嵌套在两个开放的影子根中。虽然我可以点击按钮 elem...

html karate shadow-dom

回答 1 投票 0

使用cssSelector清除Chrome浏览器的浏览数据时如何与#shadow-root（打开）中的元素进行交互

我一直在关注如何使用 selenium 自动执行影子 DOM 元素？使用#shadow-root（开放）元素。在找到清除数据按钮的过程中...

java css selenium css-selectors shadow-dom

回答 5 投票 0

使用 Python Selenium 抓取 Shadow 根元素

我正在尝试为一个小型项目抓取一个网站，我需要的数据隐藏在 HTML 的 #Shadow-root 标签下。我尝试使用 selenium 访问它，代码如下：定义

python selenium-webdriver web-scraping shadow-dom

回答 1 投票 0

SVG 使用元素 href 引用shadowRoot 之外的元素？

有没有办法让shadowRoot内部的SVGUseElement在周围的html文档中引用shadowRoot外部的片段？例如阴影有没有办法让shadowRoot内部的SVGUseElement在周围的html文档中引用shadowRoot的outside片段？例如 <ele> shadow <svg... <use href="#frag"... </ele> <svg> <rect id="frag"... </svg> 相对/替代地，shadowDom 和 SVGUseElement 的 href 之间的交互是否在某处指定？我一直在寻找完全相同的东西。问题是，当你有 <use href="#frag" 时，它引用同一个文档中的一个元素，Shadow DOM 基本上是文档中的另一个文档，就像 iframe （据我理解），所以元素 #frag 不存在。我正在使用 LitElement，我想出的解决方案是将主 <svg> 放在 <ele> 中，并使用 JavaScript 手动将其附加到影子根：（我也尝试过使用<slot>，但它们也在shadow DOM之外） <ele> <svg> <rect id="frag"/> </svg> <ele> 然后在 JavaScript 中使用 firstUpdated: firstUpdated() { if (this.childElementCount > 0) { let children = this.children; for (let child of children) { child.remove(); this.shadowRoot.append(child); } } } Wit LitElement，您还可以指定渲染根这将意味着永远不会创建阴影根（文档中的文档），并且也应该解决问题。希望这对您有用！ :-D 没有。花了几天时间解决这个问题后，我发现在全局变量（或中央状态管理器）中让整个应用程序使用 svg 图标效果最好，类似于 Dany Engelman 在本文中概述的内容回答。这是如何完成的：在应用程序的初始化阶段创建包含所有 svg 图标的全局变量。当我想将图标放置在某个位置时，我只需使用该全局变量中的 id 来引用它即可。示例如下：换句话说，use 功能被替换为包含所有 svg 符号的全局变量。实现可以在这个Codepen中找到。 3：

html svg shadow-dom

回答 2 投票 0

CSS 在自定义 HTML 元素上无法正常工作

我一直在尝试通过扩展 HTMLElement 类来创建自定义 HTML 元素。我尝试通过链接与其他两个文件位于同一目录中的 CSS 文件来添加一些样式 - index.ht...

javascript html css shadow-dom custom-element

回答 3 投票 0

阴影根内的样式元素

我正在尝试为 Shadow dom 内部的元素设置样式。我尝试了几件事，即：使用JS： document.querySelector('#select-input').shadowRoot.getElementById('#aab-select-...

css shadow-dom shadow-root

回答 2 投票 0

CSS：如何在 Shadow DOM 中添加悬停效果 ::slotted

我有影子 DOM 元素，我想要悬停效果&...