标签: shadow-dom

我想自动执行文件下载完成检查chromedriver. HTML下载列表中的每个条目看起来像

<a is="action-link" id="file-link" tabindex="0" role="link" href="http://fileSource" class="">DownloadedFile#1</a>

所以我使用以下代码来查找目标元素:

driver.get('chrome://downloads/')  # This page should be available for everyone who use Chrome browser
driver.find_elements_by_tag_name('a')

这将返回空列表,同时有3个新下载.

正如我发现的那样,只能#shadow-root (open)处理标签的父元素.那么如何在这个#shadow-root元素中找到元素呢？

假设我要创建一个自定义html元素,例如:

<video-container>
  <video></video>
</video-container>

所以我创建了这样一个模板:

<div class="wrapper">
   etc..
   <content></content>
</div>

然后我通过HTML元素原型将它附加到页面createdCallback.

内部的回调我希望能够给听众附加到video元素,所以我可以做的东西play,pause等等.如果有无论如何访问传入的视频标签目前尚不清楚给我.我可以接触到的content标签,但它不显示任何子节点.这可能吗？

我可以访问视频元素,如果我只是抓取整个文档并获取视频元素,但这很难看,因为我希望能够只获取当前自定义元素范围内的视频标记.

我偶然发现了几次Light DOM的事情,但无法理解与Shadow DOM的区别.如果那里的人可以提供明确的答案,那将非常感激.

我有一个my-checkbox包含复选框,标签,样式等的自定义元素.当切换该复选框时,我CustomEvent在构造函数中定义了一个命名检查,如下所示:

constructor(){
   super();
   this._shadowRoot = this.attachShadow({mode: 'open'});
   this.checkEvent = new CustomEvent("check", {
     bubbles: true,
     cancelable: false,
   });
 }

切换复选框时,我会调度该事件:

toggleCheckbox(){
  this.dispatchEvent(this.checkEvent);
  console.log(this.checkEvent);
  ...
}

我推断这个事件正在被调度,因为console.log的内容显示了CustomEvent的签名

我有另一个my-checkreport包含my-checkbox的自定义元素,应该对"check"事件作出反应.我在连接的回调函数中定义了一个事件监听器my-checkreport

connectedCallback(){
  ...
  this.addEventListener("check", function (e) {
        console.log('listend to check event');
        console.log(e);
    });
 }

但是,这个eventListener永远不会触发,似乎永远不会"听到"在my-checkbox组件中调度的"check"事件.我尝试在构造函数中添加此侦听器并获得相同的结果.

我有什么想法我做错了吗？

背景:我这样做是为了使这些元素可以组合.我还读过,开发Web组件的最佳实践是"使用自定义事件将信息传递出组件......"

我正在处理这种情况...

<template>
  <slot name="thing"></slot>
  <slot name="other"></slot>
</template>

和一个像这样的实现

<custom-element>
  <div slot="thing"> Thing 1 </div>
  <div slot="thing"> Thing 2 </div>
  <div slot="other"> Thing 3 </div>
</custom-element>

如何使用 CSS 查询影响事物 1 和事物 2 但排除事物 3？

例如,假设我们想要querySelectorAll('canvas')来获取文档中的所有画布,包括阴影dom中的画布.聚合物可能吗？

我在我的应用程序中使用网络组件。在 Web 组件中，我需要插入一个 React 组件。Web 组件有 Shadow DOM。当我尝试使用以下方式渲染反应组件时，出现错误。

comp = React.createElement(ReactElem, {
    config: config,
    onRender: handleRender
});

ReactDOM.render(comp , self.shadowRoot.querySelector('#app1'));

错误

target container is not a dom element

我尝试使用contentWeb 组件 API，但随后它呈现在组件顶部而不是内部。有什么线索可以让 React 组件在 Shadow DOM 中渲染吗？

目前我正在抓取文章新闻网站，在获取其主要内容的过程中，我遇到了很多人在其中嵌入了如下推文的问题：

我将 XPath 表达式与XPath 助手（chrome 插件）一起使用以测试我是否可以获得内容，然后将此表达式添加到 scrapy python，但是元素内部的#shadow-root元素似乎超出了 DOM 的范围，我正在寻找获取在这些类型的元素中获取内容的方法，最好使用 XPath。

我正在尝试在 svelte 3 中创建自定义元素（Web 组件）。我找不到任何方法来从 css 设置嵌套组件的样式。Svelte 在将样式注入到<style>ShadowDOM 内部之前删除它们。

问题是我想在我的根元素中嵌套组件。例如：

• RootComponent（纤细的自定义元素）
  • (进口) FooComponent
  • (进口) BarComponent

如此处所述：svelte-custom-element

导入到 custom-element 的所有组件都必须将编译器选项设置为<svelte:options tag="component-name" />.

使用此选项设置嵌套组件按预期工作并注入根元素 ShadowDOM。问题是styles在嵌套组件中定义的没有被注入。此问题的解决方法是将它们<style>作为 ShadowDom 中的全局样式注入到 root 的元素中。（不）幸运的是，当自定义元素尚不存在时，svelte 会在编译期间自动删除所有未使用的样式。

我的目标是使用 svelte 创建 web 组件，然后在 svelte 之外将其用作本机 web 组件。

这是REPL

正如Condutry所写的那样，自定义元素在 REPL 上并不真正起作用：

REPL 中的编译器选项实际上并不影响运行的代码，只是影响显示的代码。因此，启用 customElement > 并不意味着您正在构建和运行 Web 组件

所以它更像是一个代码示例而不是一个工作示例。

1. 我想知道是否有另一种方法来创建具有嵌套组件和适当样式的苗条自定义元素。
2. 有没有办法禁用删除未使用的 css？

https://imgur.com/a/zZia566

从<div class="nested">开始从 Nested.svelte 导入的嵌套组件。

<style>元素应该.nested注入类，但它被 svelte 编译器删除。

我得到了与在线商店https://www.tiendasjumbo.co/buscar?q=mani相关的下一个网址，但我无法将产品标签提取到另一个字段：

from selenium import webdriver
import time
from random import randint

driver = webdriver.Firefox(executable_path= "C:\Program Files (x86)\geckodriver.exe")
driver.implicitly_wait(10)
time.sleep(4)

url =  "https://www.tiendasjumbo.co/buscar?q=mani"
driver.maximize_window()
driver.get(url)
driver.find_element_by_xpath('//h1[@class="impulse-title"]')

我做错了什么，我也尝试过切换 iframe 但没有办法实现我的目标？欢迎任何帮助。