shadow-dom

I'm having trouble getting JavaScript to run properly within Shadow DOM elements I'm defining. Given the following code: <template id='testTemplate'> <div id='test'>Click to say hi</div> <script> var elem = document.querySelector('#test'); elem.addEventListener('click', function(e) { alert("Hi there"); }); </script> </template> <div id="testElement">Host text</div> <script> var shadow = document.querySelector('#testElement').createShadowRoot(); var template = document.querySelector('#testTemplate'); shadow.appendChild(template.content.cloneNode(true)); </script> document.querySelector is

Is there a way to inspect shadow dom elements in Firefox like you can do with the Chrome dev tools? Mike Ratcliffe Yes, we have added shadow DOM inspection to Firefox 65.0+ DevTools. Shadow DOM in normal content pages is always displayed e.g. By default shadow DOM for built in browser features is not displayed e.g here is a video element: To enable viewing of the Shadow DOM for built in features: Go to about:config Set devtools.inspector.showUserAgentShadowRoots to true After changing this setting you need to restart DevTools (or restart Firefox). Now the Shadow DOM for built-in elements will

Is there something like angularjs directive's transclude attribute in polymer? Something what allows me to include some elements to a specific place in template? I would like to achieve something like following: <my-header title="My title"> <my-header-item name="Item 1"></my-header-item> <my-header-item name="Item 2"></my-header-item> </my-header> which might be expressed: <h1>My title</h1> <!-- "My title" given by my-header's title attribute --> <ul> <li>Item 1 <!-- given by my-header-item --> <li>Item 2 </ul> I am not sure if this is a task for polymer or if this is a typical way to use

We are using selenium web driver and python for our test automation and trying to automate html5 app with shadow dom design. Unable to identify any elements that come under shadow-root. For eg. If I want to access any element under the shadow root given below then how can I do that? Any help is appreciated. You can inject this piece of javascript that does this and then run the find_element methods on that element: shadow_section = mydriver.execute_script('''return document.querySelector("neon-animatable").shadowRoot''') shadow_section.find_element_by_css(".flex") since you use often that you

I'm trying to create a Polymer element for contenteditable. I create a contenteditable div, place this.innerHTML there, and it becomes editable. All good with polyfills, e.g. in Firefox. But it doesn't work in Chrome 35 with native Shadow DOM. Well, it is still editable, but neither document.execCommand nor window.getSelection is working. document.execCommand does nothing. window.getSelection().getRangeAt(0).toString() is defined but empty. No error is shown. So I cannot style the selection. Does anybody know whether it's possible to make a custom editable element or not? What am I doing wrong

I am trying to create a Chrome extension with a floating widget. To do that, I have to isolate my element from the rest of the page. Shadow DOM looks like a perfect fit for that, but it isn't doing what I expected. Here is my content script: content.js var lightDom = document.createElement('style'); lightDom.innerText = 'div { color: red }'; document.body.appendChild(lightDom); var shadowDom = document.createElement('div'); document.body.appendChild(shadowDom); var shadowRoot = shadowDom.attachShadow({'mode': 'open'}); shadowRoot.innerHTML = ` <style> div { background-color: blue; } </style>

My application is able to render the Shadow DOM, but the inspector cannot display the shadow root. Can anyone help me out on this? It depends on which Shadow DOM you mean—Shadow DOM v0 or Shadow DOM v1. See http://caniuse.com/#feat=shadowdomv1 and http://caniuse.com/#feat=shadowdom No version of Safari supports Shadow DOM v0. But as far as iOS Safari, version 10.2+ support Shadow DOM v1 with the following limitation: Certain CSS selectors do not work ( :host > .local-child ) and styling slotted content ( ::slotted ) is buggy. As far as differences between Shadow DOM v0 and v1, see https:/