shadow-dom

Plain Javascript code that does what querySelector() and querySelectorAll() does, include shadowroots

由 对着背影说爱祢 提交于 2019-12-11 01:08:59
问题 I am trying to write a method that takes in two params: one of the parentNode of the current element where many childNodes with shadowroots within it, the second param being the id of an element within one of the shadowroots of one of the childNodes of this parentNode param. I tried to use the generic querySelector() methods that JS come with to find the element using the id alone, but it wouldn't work due to my element tags being inside the shadowroot. Due to this reason, I had write code

Bootstrap styles not applying within a Shadow DOM on Chrome 35

由 我的未来我决定 提交于 2019-12-11 00:01:38
问题 I've working with Bootstrap 3.1.1 and Polymer 0.2.4 for a long time and, suddenly -it may have been since the last Chrome auto-update (Version 35.0.1916.114)- Bootstrap stopped styling Shadow DOM elements. I've been able to check that the CSS classes within those nodes do not appear when inspecting the (Shadow) DOM with Chrome DevTools. In other browsers, such as Firefox, it is still working. I don't know whether this is something I'm missing or some kind of bug, but this odd styling

What is #shadow-root, and why does it put display none on my font awesome classes? [duplicate]

由 可紊 提交于 2019-12-10 19:57:59
问题 This question already has answers here : HTML / CSS - DIV Element hidden when it shouldn't be? (3 answers) Closed 4 years ago . Why does the shadow-root styles put display none on my .fa-xxx classes? The shadow-root thing adds the classes I use to a display none pile, but only the specific ones I add! I'm using PHP to include navigation, footers and such, but these don't get effected by it. For example it works just fine in my navigation. There it displays the font just fine. What is causing

Can Xpath expressions access shadow-root elements?

由 三世轮回 提交于 2019-12-10 19:18:40
问题 Currently I am scraping article news sites, in the process of getting its main content, I ran into the issue that a lot of them have embedded tweets in them like these: I use XPath expressions with XPath helper(chrome addon) in order to test if I can get content, then add this expression to scrapy python, but with elements that are inside a #shadow-root elements seem to be outside the scope of the DOM, I am looking for a way to get content inside these types of elements, preferably with XPath

Angular 2 native view encapsulation

由 让人想犯罪 __ 提交于 2019-12-10 19:12:56
问题 There is already an answered question that explains the difference between ViewEncapsulation.Emulated , ViewEncapsulation.Native ad ViewEncapsulation.None . Let's say there is Electron application that is guaranteed to be bundled with Chromium version that natively supports shadow DOM and ViewEncapsulation.Native . How can this case benefit from native encapsulation to avoid emulation overhead? Another possible case is debugging views in Angular 2 application that are heavily cluttered with

CSS precendence in shadow DOM <style>

由 别等时光非礼了梦想. 提交于 2019-12-10 11:02:06
问题 What do the CSS precendence rules say about the <style> tag in shadow DOM? I have an element <component class="component"> , a CSS file included in <head> with: component { display: inline-block; } and a <style> tag inside some shadow DOM with: ::slotted(.component) { display: block; } If I understand it correctly, the first rule should have a specificity of 0.0.1 as it has one element and the second one specificity of 0.1.1 as it has one pseudo-element and one class. Therefore, the second

Selenium Webdriver with Shadow DOM

由 可紊 提交于 2019-12-09 23:47:18
问题 While using Selenium Webdriver in C#, I get an exception when trying to select an element that exists under Shadow DOM. The exception I am getting is: NoSuchElementException How would you suggest to use Selenium with Shadow DOM? Thanks, Michal 回答1: Try to locate your element like this: driver.FindElement(By.CssSelector('selector_otside_shadow_root /deep/ selector_inside_shadow_root')); in your case it would be: driver.FindElement(By.CssSelector('app-home /deep/ #itemName1')); You can test

Styling native Shadow DOM elements

由 末鹿安然 提交于 2019-12-08 12:33:22
问题 I always believed that you were able to access and override the styling on Shadow DOM elements. I saw the article on html5rocks which defines what webkit specific selectors you can use: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; background-color: blue; width: 10px; height: 40px; } However when I tried this is doesn't work as expected - it appears as though some of the sytle properties cannot be

Custom elements not detecting children when instantiated in template of another custom element

由 a 夏天 提交于 2019-12-08 06:35:11
问题 I have an RPG Main HTML Element defined as follows. I'm instantiating it in the body of my index.html file. <link rel="import" href="packages/polymer/polymer.html"> <link rel="import" href="gridlayout.html"> <link rel="import" href="gridtile.html"> <polymer-element name="rpg-main" attributes=""> <template> <style> grid-tile { background: #FF00FF; width: 50px; height: 50px } :host { position: absolute; display: block; width: 500px; height: 500px; } </style> <grid-layout rows = "2" cols = "2"

how to protect embedded div style not to be overridden by website style

由 两盒软妹~` 提交于 2019-12-08 05:22:33
问题 I have div with its own style. I embedded this div on other website. <div id="scoped-div"> <style> label { color: green; } </style> <label> Scoped div </label> </div> But I face problem, my div style is overridden by website style. I don't want to use iframe . Except for the use of iframe is there any other way to protect my div style by external style changes? 回答1: Your request is exactly what Shadow DOM makes possible: attach a Shadow DOM to the element you want to protect (here: #scope-div
订阅 shadow-dom