shadow-dom

I had been following the discussion How to automate shadow DOM elements using selenium? to work with #shadow-root (open) elements. While in the process of locating the Clear data button within the Clear browsing data popup, which appears while accessing the url chrome://settings/clearBrowserData through Selenium I am unable to locate the following element: #shadow-root (open) <settings-privacy-page> Snapshot: Using Selenium following are my code trials and the associated errors encountered: Attempt 1: WebElement root5 = shadow_root4.findElement(By.tagName("settings-privacy-page")); Error:

dropdown menu is created in shadowDOM almost perfect, but the problem is how to hide the dropdown menu when click on any where else in window class NavComponent extends HTMLElement { constructor() { super(); let template = document.currentScript.ownerDocument.querySelector('template'); let clone = document.importNode(template.content, true); let root = this.attachShadow({ mode: 'open' }); root.appendChild(clone); } connectedCallback() { let ddc = this.shadowRoot.querySelectorAll('.dropdowncontainer') let dd = this.shadowRoot.querySelectorAll('.dropdown'); let ddc_length = ddc.length for (let

I need a selector for usage in css inside a shadow root, which selects all children (but not grand children) of the shadow root, no matter what tag they are and without giving them an ID. In the example below, SPAN,A,P and DIV should get a red border, but SPAN IN DIV not. <my-element> #shadow-root <span>SPAN</span> <a>A</a> <p>P</p> <div> DIV <span>SPAN IN DIV</span> </div> <style> :root>*{border:1px red solid;} </style> </my-element> I hoped, the :root -Selector would do the job inside of a shadow dom, but thats not the case. It would also be a possible solution if someone shows how to set an

I am learning about angular.dart components by trying to make one that will access an existing jquery plugin. I am trying something like the following: library mylib; import 'dart:html'; // querySelector import 'package:js/js.dart'; // javascript import 'package:angular/angular.dart'; @NgComponent( selector: 'aSelector', templateUrl: 'partial.html', cssUrl: 'style.css', publishAs: 'ctrl', map: const { 'param': '=>param' } ) class myComponent extends NgShadowRootAware { String param; Compiler compiler; Injector injector; Scope scope; MyComponent(this.compiler, this.injector, this.scope); void

I want to include Polymer Elements into my angular2 App since Angular2 Material still doesn't provide enough elements. Additionally, I want to style the element, i.e. setting the width of it. I have <paper-dropdown-menu class="dropdown" label="Wiederholung" vertical-align="bottom" horizontal-align="right"> <paper-listbox class="dropdown-content"> <paper-item>einmalig</paper-item> <paper-item>wöchentlich</paper-item> <paper-item>monatlich</paper-item> </paper-listbox> </paper-dropdown-menu> EDIT in my index.html I have <!-- polymer components --> <script src="/node_modules/bower_components

Suppose a JS module exports shadowRoot which was created with either el.createShadowRoot or el.attachShadow (we don't know which). How do we detect if the root is a v0 shadow root or a v1 shadow root (i.e. how do we detect which method was used to create the root)? f.e., What would I fill in the following conditional statements? // for argument's sake, we don't create the root, we only get a reference // to it: import shadowRoot from 'somewhere' function getShadowRootVersion(root) { if ( ... ) return 'v0' if ( ... ) return 'v1' } console.log(getShadowRootVersion(shadowRoot)) // should output