shadow-dom 相关问题

我创建了一个带有弹出窗口的按钮，如下所示：这是Vue模板代码：我创建了一个带有弹出窗口的按钮，如下所示：这是Vue模板代码： <template> <div :class="['lang-button', { 'in-list': listItem } ]"> <k-button id="lang-button" :raised="!listItem" clear class="py-3 px-3"> <font-awesome-icon icon="earth-americas" class="mr-2" /> {{ $t('common.language') }} </k-button> <ion-popover trigger="lang-button" :dismiss-on-select="true"> <ion-content class="lang-button-popover-content"> <ion-list> <ion-item :button="true" :detail="false" @click="setLanguage('en')">English</ion-item> <ion-item :button="true" :detail="false" @click="setLanguage('es')">Español</ion-item> </ion-list> </ion-content> </ion-popover> </div> </template> 不幸的是，最后一项（西班牙语）有一个我想删除的底部边框。在 Chrome Inspector 中，我可以这样做：之后看起来更好了：但我无法弄清楚如何在代码中设置它的样式来做到这一点。我试过： ion-item::part(native) { .item-inner { border-bottom-width: 0; } } 还有一堆其他变体，但没有任何效果。如何删除 div.item-inner 的样式以删除下边距？谢谢。要解决这个问题就像查看 docs 一样简单，它向您展示了如何在没有额外 CSS 的情况下执行此操作。 <ion-item lines="none"> <ion-label>Item Lines None</ion-label> </ion-item>

css ionic-framework web-component shadow-dom ionic-vue

回答 1 投票 0

如何从 Shadow DOM 使用父 CSS

我有来自父应用程序的CSS，我想在由shadow dom制作的Web组件中使用它。我不想将 css 从父应用程序复制到 Web 组件，但现在，Web 组件 c...

html css shadow-dom web-content webcontent

回答 2 投票 0

如何查询 Shadow DOM 而不是 Light DOM 来获取附加到 ShadowRoot 的脚本

我有一个包含脚本内容的模板，所有这些内容都附加到自定义元素的影子 DOM 中。如何让这个脚本查询 Shadow DOM 而不是 Light DOM ，因为它是

web-component shadow-dom custom-element

回答 1 投票 0

通过 ElementInternals 与表单控件关联的自定义标签元素？

我正在编写一个名为 fancy-input 的自定义输入元素，它可以通过 FormInternals API 参与表单。特别是，ElementInternals.labels 属性为我提供了标签 el 的列表...

forms web-component shadow-dom custom-element lit-element

回答 1 投票 0

如何以编程方式创建一个槽并将 HTMLElement 插入其中？

我想在不使用 HTML 的情况下创建一个槽并将一个元素插入其中。我尝试了以下方法和一些变体，但没有运气。我做错了什么？为什么 slot.assignedNodes() 返回一个 e...

javascript html web-component shadow-dom slot

回答 1 投票 0

媒体控制器元素的类名

我正在使用 media-chrome 中的“media-controller”以及 tailwind.css 中的样式。添加 classname 值时，它们的 css 不会添加到 html 元素中。这是它的屏幕截图。螺丝...

html css tailwind-css next.js13 shadow-dom

回答 1 投票 0

如何单独渲染 Chakra UI 组件（NextJs 15 iframe）

我有一个使用 Tailwind 构建的应用程序，它可以渲染和操作 Chakra UI 组件，以便使用 iframe 进行隔离测试。我这样做是为了让顺风 CSS 不会影响脉轮 ui

reactjs shadow-dom next.js15

回答 1 投票 0

开放式和封闭式shadow DOM封装模式有什么区别？

我想为元素创建一个影子 DOM，这样我就可以显示 Chrome 扩展的元素，而不会受到页面样式的影响。当我查看 Element.createShadowRoo 的文档时...

javascript html dom shadow-dom

回答 2 投票 0

将角度材料添加到基于角度元素的微前端

我有一个 Angular Web 组件，是在 @Angular/elements 的帮助下构建的。该 Web 组件已经在我的网站上运行了几个月，因此大部分代码、部署和加载都没有问题。该项目...

angular-material web-component shadow-dom css-variables angular-elements

回答 1 投票 0

使用 Chrome 扩展覆盖 Element.prototype.attachShadow

我需要访问具有封闭 Shadow DOM 的 Web 组件的 DOM，以进行某些 Selenium 测试。我在几篇参考文献中读到，您可以覆盖文档上的 Element.prototype.attachShadow...

javascript google-chrome-extension shadow-dom

回答 3 投票 0

发现 javascript 错误：无法读取 null 的属性（读取“shadowRoot”）

我正在尝试使用 python 进行网页抓取，但发现错误 JavascriptException：javascript错误：无法读取 null 的属性（读取“shadowRoot”）我不明白如何解决它。请...

javascript selenium-webdriver web-scraping shadow-dom

回答 1 投票 0

@property 在影子 DOM 中无法识别

现在 @property 最近随 Firefox 128 一起发布，我认为尝试一下是个好主意。使用常规 HTML 和 CSS 时效果很好 @属性--a1 { 语法：' 现在 @property 最近随 Firefox 128 一起发布，我认为尝试一下是个好主意。使用常规 HTML 和 CSS 时效果很好 @property --a1 { syntax: '<angle>'; inherits: false; initial-value: 10deg; } .hi1 { border: 2px solid black; width: fit-content; margin: 0 auto; } .box1 { --a1:10deg; /* needed for firefox to have a valid output */ cursor:pointer; width:250px; height:200px; margin:15px; display:inline-block; transition:--a1 0.5s; background:linear-gradient(var(--a1),red ,blue); } .box1:hover { --a1:180deg; } body { text-align:center; } <div class="hi1"> <h1>In regular DOM</h1> <div class="box1"></div> <div class="box1" style="background:conic-gradient(from var(--a1), red var(--a1),blue)"></div> <div class="box1" style="background:linear-gradient(calc(180deg - var(--a1)),red ,blue,red )"></div> </div> 但是如果我在影子 DOM 中使用它，它会突然被完全忽略。 const css = `@property --a2 { syntax: '<angle>'; inherits: false; initial-value: 10deg; } .hi2 { border: 2px solid black; width: fit-content; margin: 0 auto; } .box2 { --a2:10deg; /* needed for firefox to have a valid output */ cursor:pointer; width:250px; height:200px; margin:15px; display:inline-block; transition:--a2 0.5s; background:linear-gradient(var(--a2),red ,blue); } .box2:hover { --a2:180deg; }`; class MyComponent extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); root.innerHTML = ` <style>${css}</style> <div class="hi2"> <h1>In shadow DOM</h1> <div class="box2"></div> <div class="box2" style="background:conic-gradient(from var(--a2), red var(--a2),blue)"></div> <div class="box2" style="background:linear-gradient(calc(180deg - var(--a2)),red ,blue,red )"></div> </div>`; } connectedCallback() { } } customElements.define('my-component', MyComponent); <my-component> </my-component> 知道为什么或如何说服它起作用吗？这是说明问题的 codepen https://codepen.io/true-cc/pen/eYwYJaM 这似乎应该可行，但由于没有浏览器支持它，我猜这是一个规格错误。规格中有这一段：与 CSS 中的许多概念不同（请参阅CSS 范围 1 §3.5 名称定义构造和继承），属性注册的范围不限于树范围。所有注册，无论它们出现在最外层文档中还是出现在影子树中，都在Document的单个全局注册映射中进行交互。为什么无法确定注册范围？当自定义属性作为 Shadow DOM 使用组件的公共 API 的一部分公开时，此全局注册行为将按预期工作。如果外部页面出于不同目的使用同名的自定义属性，那么这已经是需要解决的冲突，并且注册行为不会使情况变得更糟。但是，如果自定义属性旨在供组件内部私有使用，则建议为该属性指定一个可能唯一的名称，以尽量减少与任何其他上下文发生冲突的可能性。例如，可以通过在属性名称中包含项目名称或一些简短的随机文本字符串来完成。这说明的是，由于 @property 只是调用全局 CSS.registerProperty() 方法的另一种方式，如果您在 Shadow DOM 中定义这样的规则，它仍然会影响 light DOM，因为只有一个注册表. 但是，没有浏览器支持 Shadow DOM 内的规则，它们都会完全忽略它。因此，您可以全局声明该规则，或使用 CSS.registerProperty()，即使浏览器支持定义，如果影子 DOM 无论如何也不会被限定在所述影子 DOM 范围内。使用全局规则： const css = ` .hi2 { border: 2px solid black; width: fit-content; margin: 0 auto; } .box2 { --a2:10deg; /* needed for firefox to have a valid output */ cursor:pointer; width:250px; height:200px; margin:15px; display:inline-block; transition:--a2 0.5s; background:linear-gradient(var(--a2),red ,blue); } .box2:hover { --a2:180deg; }`; class MyComponent extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); root.innerHTML = ` <style>${css}</style> <div class="hi2"> <h1>In shadow DOM</h1> <div class="box2"></div> <div class="box2" style="background:conic-gradient(from var(--a2), red var(--a2),blue)"></div> <div class="box2" style="background:linear-gradient(calc(180deg - var(--a2)),red ,blue,red )"></div> </div>`; } connectedCallback() { } } customElements.define('my-component', MyComponent); @property --a2 { syntax: '<angle>'; inherits: false; initial-value: 10deg; } <my-component> </my-component> 使用CSS.registerProperty()： const css = ` .hi2 { border: 2px solid black; width: fit-content; margin: 0 auto; } .box2 { --a2:10deg; /* needed for firefox to have a valid output */ cursor:pointer; width:250px; height:200px; margin:15px; display:inline-block; transition:--a2 0.5s; background:linear-gradient(var(--a2),red ,blue); } .box2:hover { --a2:180deg; }`; class MyComponent extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'closed' }); root.innerHTML = ` <style>${css}</style> <div class="hi2"> <h1>In shadow DOM</h1> <div class="box2"></div> <div class="box2" style="background:conic-gradient(from var(--a2), red var(--a2),blue)"></div> <div class="box2" style="background:linear-gradient(calc(180deg - var(--a2)),red ,blue,red )"></div> </div>`; CSS.registerProperty({ name: "--a2", syntax: "<angle>", inherits: false, initialValue: "10deg", }); } connectedCallback() { } } customElements.define('my-component', MyComponent); @property --a2 { syntax: '<angle>'; inherits: false; initial-value: 10deg; } <my-component> </my-component>

javascript css shadow-dom css-houdini

回答 1 投票 0

使用 Python Selenium Geckodriver 的 Shadow DOM

我正在尝试使用此代码访问以下网站上的影子根元素 https://www.wego.ae/en/flights/searches/cSFO-cLHR-2020-03-09:cLHR-cSFO-2020- 03-22/经济/1a:0c:0i?sort=价格&订单...

selenium firefox web-scraping geckodriver shadow-dom

回答 2 投票 0

shadow-dom 相关问题

最新问题