标签: shadow-dom

我试图找到一种方法来封装Javascript而不使用iframe.理想情况下,我想要一种在父页面上加载外部HTML组件(小部件)的方法,而不需要使用iframe来加载两步(首先加载主页,然后才加载iframe内容) ).

是否有可能通过一些新的Web组件技术实现这一点 - 影子DOM /模板/导入？我能够接近将HTML添加到shadow DOM并封装CSS,但无法确认是否可以为组件的javascript执行获取单独的文档.

在编写Polymer概念证明时,我不断得到:

/deep/ combinator is deprecated. See https://www.chromestatus.com/features/6750456638341120 for more details.

在谷歌浏览器的控制台中.

是否有办法在每次加载页面时都不会收到此警告？

在shadow DOM v0中,开发人员不需要了解如何将light DOM内容放置在组件的阴影dom中的内部实现.

V0的规格相匹配的内置组件的当前行为像<select>和<option>在消费者不关心我在那里特别是它们的元素内容将被放置.相反,shadow DOM会自动选取与标记select属性中指定的选择器匹配的元素,<content>并将它们放在阴影树内的正确位置.消耗开发人员的代码需要较少的样板.

在v1中,您需要具体了解插槽名称.模仿前面提到的相同示例<select>,我需要使用类似<option slot="option">插槽属性值指定放置当前元素的位置的内容.我也可以添加那些不打算包含在那个插槽中的元素<table slot="option">.

总之,我的担忧是:

1. 每次我使用web组件时都需要指定额外的信息
2. 能够将无效元素添加到错误的阴影DOM位置,并导致不可预测的副作用

在阴影DOM v1中有一种方法可以获得<content select="option"></content>孩子必须匹配特定选择器的旧行为,还是被丢弃？如果没有,有谁知道为什么特别是这么大的突破性改变？

例1(v0规范)

的index.html

<my-component>
    <my-child-component>Text</my-child-component>
    <wrong-child-component>Wrong</wrong-child-component>
</my-component>

component.html(shadow DOM)

<div>
    <content select="my-child-component"></component>
</div>

结果DOM

<my-component>
    #shadow-root
        <div>
            <my-child-component>Text</my-child-component>
        </div>
<my-component>

例2(v1规范)

的index.html

<my-component>
    <my-child-component slot="child-slot">Text</my-child>
    <wrong-child-component slot="child-slot">Wrong</wrong-child-component>
</my-component>

component.html(shadow DOM)

<div>
    <slot name="child-slot"></slot>
</div>

结果DOM

<my-component>
    #shadow-root
        <div>
            <my-child-component>Text</my-child-component>
            <wrong-child-component>Wrong</wrong-child-component>
        </div>
<my-component>

我正在迈入Web组件的第一步，而未使用任何第三方库（例如Polymer）。主要卖点之一是Web组件样式与其他地方定义的样式分开，从而允许在类似于沙盒的环境中对组件的shadow-DOM进行样式设置。

我遇到的问题是样式如何通过插槽元素级联。由于带槽的元素不是影子DOM的一部分，因此只能用::slotted()组件模板中的选择器对其进行定位。这很棒，但是几乎不可能保证Web组件在所有上下文中都能正确显示，因为外部定义的样式还具有无可比拟的专一性*应用于空位元素。

*此外!important。

这个问题可以归结为：

customElements.define("my-nav",
  class extends HTMLElement {
    constructor() {
      super();

      const template = document.querySelector("template#my-nav").content;
      this.attachShadow({ mode: "open" })
        .appendChild(template.cloneNode(true));
    }
  }
);

a {
  color: red; /*  >:(  */
}

<template id="my-nav">
  <style>
    .links-container ::slotted(a) {
      color: lime;
      font-weight: bold;
      margin-right: 20px;
    }
  </style>

  <div class="links-container">
    <slot name="links"></slot>
  </div>
</template>

<p>I want these links to be green:</p>
<my-nav>
  <a href="#" slot="links">Link 1</a>
  <a href="#" slot="links">Link 2</a>
  <a href="#" slot="links">Link 3</a>
</my-nav> …

我正在使用LitElement创建自定义Web组件。我对此很陌生，因此决定尝试制作图像幻灯片。我 在修改W3Schools幻灯片以使其可用作LitElement时将其用作参考。问题是，当我尝试使用document.getElementByClassName时，我什么也没得到。由于我正在使用Shadow DOM，因此我对这个问题很熟悉，因此我将其更改为this.shadowRoot.getElementsByClassName。不幸的是，我被告知我要使用的不是函数。使用LitElement和shadow dom时如何按类名获取元素？如果您想查看我的组件的外观，下面是代码：

import { LitElement, html} from '@polymer/lit-element';

class ImageGalleryElement extends LitElement {

static get properties() { return {
    slideIndex: { type: Number },
  }};

constructor(){
    super();

    this.slideIndex=1;
    this.showSlides(this.slideIndex);
}

// Next/previous controls
plusSlides(n) {
    this.showSlides(this.slideIndex += n);
}

// Thumbnail image controls
currentSlide(n) {
    this.showSlides(this.slideIndex = n);
}

showSlides(n) {
    var i;
    console.dir(this.shadowRoot);
    var slides = this.shadowRoot.getElementsByClassName("mySlides");
    console.dir(slides);
    var dots = this.shadowRoot.getElementsByClassName("dot");
    if (n > slides.length) {this.slideIndex = 1} 
    if (n < 1) …

我正在开发一个使用 StencilJS 构建的 Web 组件的 Web 应用程序。所有组件都打开了 Shadow DOM。许多组件使用“槽”来接受子内容。

我在使用 Flexbox 布局此应用程序时遇到一些问题。我经常遇到的一种情况是，我希望一个组件充当 Flexbox 容器，而其子组件则充当 Flex 项目。

我怀疑 Shadow DOM 阻塞了我的 Flexbox。有没有办法让 Flexbox 与 Web 组件和 Shadow DOM 一起工作？

例子：

<web-component-a>
  <web-component-b></web-component-b>
  <web-component-b></web-component-b>
  <web-component-b></web-component-b>
</web-component-a>

我正在尝试单击#shadow-root (closed)iframe 内的按钮

<iframe title="recaptcha challenge expires in two minutes" 
   <div class="button-holder help-button-holder">
      #shadow-root (closed)
         <link rel="stylesheet" href="chrome-extension://mpbjkejclgfgadiemmefgebjfooflfhl/src/solve/solver-button.css">
         <button tabindex="0" title="Solve the challenge" id="solver-button"></button>
   </div>
</iframe>

这就是我用来切换到 iframe 的方法

WebDriverWait(driver, 10).until(EC.frame_to_be_available_and_switch_to_it((By.XPATH,"//iframe[@title='recaptcha challenge expires in two minutes']")))

我怎样才能点击//button[@id="solver-button"]

这是它的真实外观的照片

iframe-链接

按钮链接

我正在构建一个小部件，为了避免 css 冲突，我将小部件 css 移到了 Shadow 根目录中。但即使如此，父网站的 CSS 样式也会影响小部件

注意到由于父网站上的这一行而发生了错误。

@media screen and (min-width: 768px) {
  body {
    font-size: 2rem;
  }
}

问题是，为什么父网站中的 body 属性会影响 Shadow root css。Shadow root的目的不就是为了避免这种冲突吗？

我怎样才能避免此类问题？

我试图避免 !important 但还有其他方法吗？

• 我一直在努力Shadow DOM，然后遇到了一个问题。
• 我使用:root {}语法来声明一些CSS variables. 但不幸的是，它不起作用。
• 这是我的代码

• 在1.html

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Shadow DOM</title>
  </head>
  <body>
    <square-element></square-element>
    <script src="./1.js"></script>
  </body>
  

  Run Code Online (Sandbox Code Playgroud)

• 在1.js：

  const htmlCode = `
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Shadow DOM</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 24px;
      }
  
      :root {
        --bg-color: …

  Run Code Online (Sandbox Code Playgroud)

我们正在使用 selenium web 驱动程序和 python 进行测试自动化，并尝试使用 shadow dom 设计自动化 html5 应用程序。无法识别 shadow-root 下的任何元素。例如。如果我想访问下面给出的影子根下的任何元素，那么我该怎么做？任何帮助表示赞赏。