shadow-dom

Context: I am carrying out tests about web component composition in different contexts. Particularly I am trying to relate several web component by getting access to one of them from another one by a searching process within the DOM / Shadow DOM of the involved components. Problem: Let's suppose we have a web component named x-foo requiring to access another one x-randgen . The latter component exposes business methods used by the former. In order to avoid a tightly coupled communication between both components I would like to use a discovery mechanism in x-foo to access x-randgen through a

I would like to use an anchor-element with a hash-URL inside of a custom element that uses shadow DOM. I would expect, that the browser scrolls down to that anchor, but it does not do it (at least Chrome). Detail: I have an index.html like this: ... <a href="#destinationInsideShadowDOM">Jump</a> ... <my-custom-element></my-custom-element> ... And another html-file for the custom-element, which contains the anchor: <template id="my-custom-element"> ... <a id="destinationInsideShadowDOM"></a> ... </template> I want the browser to scroll down to that anchor when I click on the link in index.html.

I think shadow DOM lets us achieve style encapsulation and also hiding HTML implementation of the component. But when I inspect shadow root in chrome I can see the HTML of the component. So what exactly does it help us to achieve? Is it only style encapsulation? Sure, the DevTools allow you to investigate the shadow DOM but if you get the HTML for index.html querySelector('body').innerHTML the shadow DOM of the elements is not included. You explicitly need to switch to the shadow DOM of a custom element to get access to that HTML. Shadow DOM is not about hiding your elements implementation

I'm currently using polymer's core-scaffold & co. to create an header/sidebar with a content area. I'm currently having the problem that I cannot access certain properties of the content element, such as scrollTop. (since the actual scrollTop property that I need to access is defined in the shadow DOM.) This conflicts with a lazyload jquery plugin I'm using. The plugin is checking the window.scrollTop but changing the plugin to check the scrollTop of my content (that scrolls instead of the window) won't have any affect, since the scrollTop is "hidden" in the shadow DOM. Is there a way to

I'm trying to inspect the shadow DOM for certain HTML5 controls, like the date picker for the input type="date" and the actual suggestion dropdown list for inputs bound to a datalist . Preferably in Chrome, but other browsers will do too. I've found that by enabling the Shadow DOM setting in Chrome's inspector options allows me to inspect the shadow DOM for the actual input (which includes the ::-webkit-calendar-picker-indicator arrow to show the datepicker) but not the datepicker itself: The same goes for the datalist . It appears as these controls are not part of the input, but I also can't

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 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 this approach in chrome://downloads/ link with this css_selector : downloads-manager /deep/ downloads-item

Font Awesome is not working in my shadow DOM since I have the following in it to prevent styles from leaking in and out: :host { all: initial; /* 1st rule so subsequent properties are reset. */ display: block; contain: content; /* Boom. CSS containment FTW. */ } I'm able to use other stylesheets by just inlining them within the :host property, but that doesn't work with Font Awesome since it uses relative paths in its stylesheet. I found this post and tried it with the scoped CSS I implement, but the icons show as squares, as can be seen in my example . I had the same issue with StencilJS.

I'm trying to extend the HTMLOptionElement , <template id="cOptionTemplate"> <content></content> </template> <select> <option is="custom-option">Test</option> </select> var cOption = document.registerElement('custom-option', { prototype: Object.create(HTMLOptionElement.prototype, { createdCallback: { value: function() { var template = document.getElementById("cOptionTemplate") var clone = document.importNode(template.content, true); this.createShadowRoot().appendChild(clone); } }, attributeChangedCallback: { value: function (attrName, oldVal, newVal){ switch(attrName){ case "attr1": console