如何定位位于嵌套影子 DOM 内的搜索框？

到目前为止，我已经尝试了几种不同的方法来定位，下面是其中之一，但它不起作用：

定位器：

//Shadow roots
const SDW_MAINAPP_G1 = "main-app"
const SDW_VOYAGETOPBAR_G2A = "voyage-topbar"
const SDW_VOYAGEPANEL_G2B = "voyage-float-panel"
const SDW_VESSELLIST_G3B = "voyage-vessel-list"
const SDW_VOYAGEFILTER_G4B1 = "voyage-filter"
const SDW_LISTSORT_G4B2 = "voyage-vessel-list-sort"

//Left Panel - Search Box
const INP_SEARCH_VESSEL = "#filter"

实际代码：

class SearchComponents {
    static validateSearchBar() {
         cy.get(SDW_MAINAPP_G1)
        .shadow()
        .find(SDW_VOYAGEPANEL_G2B)
        .find(SDW_VESSELLIST_G3B)
        .find(SDW_VOYAGEFILTER_G4B1)
        .find(INP_SEARCH_VESSEL)
        .should('be.visible')
        .should('be.enabled')
    }
   //...
   }

测试运行器中的错误：

背景

我\xe2\x80\x99m 喜欢 SVG2 中扩展的 CSS 支持。不用一遍又一遍地重写属性，这很好。所以我\xe2\x80\x99一直在将项目中的一些代码从SVG属性转换为CSS。其中大部分效果都很好。

当谈到转换时，如果您熟悉 CSS 转换在 HTML 中的工作方式，那么事情可能会显得很棘手。（这对于rotate()转换尤其如此，这是这个问题的焦点。） \xe2\x80\x99s 因为 SVG 没有 \xe2\x80\x99t 具有 HTML 的 \xe2\x80\x9c 自动流 \xe2\x80\x9d做。

换句话说，当你有一堆 HTML 元素时，它们会一个接一个地根据盒模型自动布局。

SVG 中没有这样的 \xe2\x80\x9cautomatic\xe2\x80\x9d 或 \xe2\x80\x9cdefault\xe2\x80\x9d 布局。因此，SVG 转换默认为从原点计算。（0,0用户坐标中的\xe2\x80\x99s）。

近乎完美的解决方案

对于大多数元素，\xe2\x80\x99 有一个简单的解决方案：很棒的 CSS 属性transform-box。在大多数情况下，使用以下 CSS 将允许您以与 HTML 元素几乎相同的方式转换 SVG 元素：

/* whatever elements you want to transform */\nrect, polygon {      \n    transform-box:    fill-box;  \n    transform-origin: center center;  /* or `top …

在Google Polymer第1课中,他们有一个包含内联样式表的示例.我想将它移动到一个css文件,但样式在模板标签内.更糟糕的是,它说的是

在shadow DOM树中使用:host伪类与托管树的元素匹配.在这种情况下,它匹配元素.

问:我可以将此样式移动到css文件吗？

我创建了一个名为"memory-box"的自定义元素,如下面的代码所示.
请注意"memory-box-template"中的"logthis"功能.

内存box.html

<template id="memory-box-template">
    <input id="memory-box" type="form" />
    <input type="button" id="testbutton" />
    <script type="text/javascript">
    function logthis(me){
        console.log(me);
    }    
    </script>
</template>

<script type="text/javascript">
    (function() {
        var thisDoc = document.currentScript.ownerDocument;
        var storage = localStorage;

        var proto = Object.create(HTMLElement.prototype, {
            createdCallback: {
                value: function() {                
                    var temp = thisDoc.querySelector('#memory-box-template');
                    var con = document.importNode(temp.content, true);
                    this.createShadowRoot().appendChild(con);
                    var input = this.querySelector('::shadow #memory-box');
                    var data = storage.getItem(this.id);
                    input.value = data;
                    input.addEventListener('input', saveData.bind(input, this.id));
                }
            },
        });

        document.registerElement('memory-box', {
            prototype: proto
        });

        function saveData(id, e) { …

我正在使用Web Components并尝试将click事件绑定到Shadow DOM内部的元素.

1. component.html包含<link rel="import" ...>在index.html内部

<template id="my-element">
    <section>
        <header>
            <content select="h1"></content>
            <button></button>
        </header>
        <content select="div"></content>
    </section>
</template>

2.后期元素用法:

<my-element>
    <h1>Headline</h1>
    <div>...</div>
</my-element>

3.访问元素并将函数绑定到它

现在我想在我的内部添加一个(不幸的是隐藏了).喜欢:addEventListener()<button><my-element> #shadow-root

var elemBtn = document.querySelector('my-element button');
elemBtn.addEventListener('click', function(event) {
    // do stuff
});

但那不行.我如何实现这一目标？

我正在尝试在我的Angular 2组件中声明的元素上调用函数.问题是我不知道如何从我的JS代码中检索元素.如果我可以将元素从模板传递给JS代码,它可以工作,但使用document.querySelector不会返回任何内容.

示例代码(plunk):

@View({
  template: `
    <div>
      <span id="p1">{{name}}</span>
      <span #p2>{{name}}</span>
    </div>
  `,
  encapsulation: ViewEncapsulation.Native
})
export class Person {
  sayHello(e) {
    p1 = document.querySelector('p1');
    console.log('p1:', p1)
    p2 = document.querySelector('p2');
    console.log('p2:', p2)

    alert('VanillaId: ' + (p1 ? p1.innerHTML : 'null') +
          '\nAngularId: ' + (p2 ? p2.innerHTML : 'null'));
  }
}

我怀疑它与阴影dom有关,但我不知道如何获取阴影根并使用它来进行查询.this似乎没有暴露任何有用的访问dom.

我正在开发一个应用程序,我将其他html网页加载到当前页面.其他网页是独立的应用程序.我正在尝试在shadow DOM中加载网页.为此,我使用了以下代码,它将尝试在shadowRoot中导入test-template.html.这里我没有使用模板标签,因为我要动态渲染模板(使用ajax).

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>
     <input type="button" onclick="loadTemplate()" value="Load template">
     <div id="template-holder"></div>
     <script>
     function loadTemplate() {
      var templateUrl = "test-template.html",
      templateReceivedCallback = function(response) {
         var div = document.getElementById('template-holder'),
            shadowRoot = div.attachShadow({
                mode: 'open'
            });
        shadowRoot.innerHTML = response;
      };
     $.get(templateUrl, templateReceivedCallback);
     }
  </script>
 </body>

test-template.html将如下所示:

  <div>Hello from template</div>

 <script>
     alert("this text is from script inside of template")
 </script>

我能够在当前页面中加载提到的test-template.html,但是test-template.html里面的javascript没有执行.有没有办法让脚本运行？如果是,请分享正在运行的示例.谢谢.

当我调用host.attachShadow({mode: 'open'})包含一些元素的 div 时，div 的内容似乎消失了。这些元素在 devtools 中仍然可见，但在屏幕上不再可见。

我是否用任何东西填充 shadowRoot 都没有关系；一旦附加阴影，div 的孩子就会消失。

codepen 演示：https ://codepen.io/anon/pen/VrBdOe

为什么内容会消失？我在网站上看到过，所以我知道这是可能的。例如，参见https://www.polymer-project.org/2.0/start/quick-tour的代码，该<pw-shell>节点有一个 shadow-root 和多个兄弟节点并存。那里发生什么事了？

我正在尝试使用 shadow DOM 修改两个自定义 HTML 元素“输出屏幕”和“自定义计算器”的样式。

当我尝试通过附加如下所示的 shadow DOM 来执行此操作时，未应用样式。任何想法我做错了什么？

JS小提琴

<custom-calculator id="calculator">
  <output-screen></output-screen>
</custom-calculator>

<script>
var o = Object.create(HTMLElement.prototype);
    var oElement = document.registerElement('output-screen', {
        prototype: o
    });

var c = Object.create(HTMLElement.prototype);
var cElement = document.registerElement('custom-calculator', {
  prototype: c
});

var calc = document.querySelector('#calculator')
calc.attachShadow({ mode: 'open' });
calc.shadowRoot;
calc.shadowRoot.innerHTML = `
<style>
output-screen{
display:inline-block;
background-color:orange;
width:50%;
height:100vh;
}
custom-calculator {
display:inline-block;
background-color:grey;
width:100%;
height:100vh;
vertical-align:top;
}
</style>
`;
</script>

我正在为我的 Web 组件实现 Orchestrator 模式，如下所示：

<body>
  <my-controller>
    <div>
      <my-list>
        <span>
          <my-item></my-item>
        </span>
      </my-list>
    </div>
  </my-controller>
</body>

我创建的所有自定义元素都使用 Shadow DOM 使用const root = super.attachShadow({mode: "open"}); root.appendChild(...);.

从我的内部 Web 组件中，我想在以下位置访问我的my-controller组件connectedCallback()：

public connectedCallback(): void
    {
        if (this.isConnected)
        {
            for (let node = this.parentElement; node; node = node.parentElement)
                if (node instanceof ContainerBase)
                {
                    this._service = (<ContainerBase>node).GetService(this);
                    break;
                }

            if (this._service) this.Reset();
            else throw new ReferenceError(`${this.nodeName.toLowerCase()}: Couldn't find host element while connecting to document.`);
        }
    }

奇怪的是：我只能访问直接父网络控件。

所以，如果connectedCallback() …