shadow-dom | 易学教程

How to query elements within shadow DOM from outside in Dart?

阅读更多关于 How to query elements within shadow DOM from outside in Dart?

问题 How can I select nodes within shadow DOM? Consider the following example: structure of "unshadowed" DOM <app-element> #shadow-root <h2></h2> <content> #outside shadow <h2></h2> </content> <ui-button> #shadow-root <h2></h2> </ui-button> </app-element> index.html <body> <app-element>    <h2>app-element > content > h2</h2> </app-element> </body> templates

Can I access the shadow DOM using jQuery?

阅读更多关于 Can I access the shadow DOM using jQuery?

问题 I defined a component with polymer like this: <polymer-element name="my-component"> <template> <div id='test'>CONTENT</div> </template> </polymer-element> Now I want to access the shadow dom, for example: to get the content of div id='test' var x = $("div#test").html(); The given code doesn't work. Can I access the shadow dom with jquery? 回答1: No, not outside of the Polymer element. After reading up on Polymer, it looks like you can only have access to the shadow-DOM of Polymer elements in

What is the difference between open and closed shadow DOM encapsulation mode?

阅读更多关于 What is the difference between open and closed shadow DOM encapsulation mode?

问题 I want to create a shadow DOM for an element so I can display elements for a Chrome extension without the page styles affecting them. When I looked at the documentation for Element.createShadowRoot I saw it was deprecated so I checked out Element.attachShadow . It said I had to provide an encapsulation mode but did not explain what the different modes do. I searched a bit but I wasn't able to find anything clearly explaining what the difference was. What is the difference between the modes

Bootstrap.js not working in Polymer components

阅读更多关于 Bootstrap.js not working in Polymer components

问题 I'm currently working on translating our current Dart Web UI project to Polymer.dart. We use Bootstrap 3 for the front-end styling and many web animations (e.g. dropdown menus, modals, tooltips). However after I translated one Web UI component into Polymer, all the Bootstrap JavaScript stopped working for the sub component, since it was now encapsulated in the ShadowDOM. To access an element in the ShadowDOM from Dart I have to use the shadowRoot field, and from JavaScript in Chrome I have to

What goes wrong when a display:inline custom element contains display:block elements?

阅读更多关于 What goes wrong when a display:inline custom element contains display:block elements?

问题 I'm building a custom element to mark up examples (play with it at http://jsbin.com/kiboxuca/1/edit): <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.0/platform.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.0/polymer.js"></script> <polymer-element name="my-example" noscript> <template> <style> :host { display: inline } </style> [ <em>Example:</em> <content></content> — <em>end example</em> ] </template> </polymer-element> <div> Some text <my-example

How to apply common CSS styles to many Shadow Roots at once?

阅读更多关于 How to apply common CSS styles to many Shadow Roots at once?

问题 Consider, I have few elements which use Shadow DOM to hide their internal div-soup and layout. Even tough they are different, they share the same CSS style sheet, as they are using the same set of elements that are supposed to be styled in consistent manner. This could be, for example, a CSS framework (bootstrap). The problem is that this style sheet is pretty big. What is the most efficient way to share such big style sheet between many Shadow Roots (in SD V1)? 回答1: UPDATE: 2019 - Use

Style html,body from web component (Angular 2)

阅读更多关于 Style html,body from web component (Angular 2)

问题 I'm working on a LoginComponent in Angular 2 that should "restyle" the html and body tags, so I can put in a background image specific for the login page. But just adding a style for the html, body in my login.css doesn't seem to work. Is there a way to override the style on the html, body from a component? Or any element for that matter. I've tried things like: :host(.btn) { ... } :host(.btn:host) { ... } .btn:host { ... } to style an element from outside the Login component. But nothing

What do /deep/ and ::shadow mean in a CSS selector?

阅读更多关于 What do /deep/ and ::shadow mean in a CSS selector?

问题 In looking at Polymer, I see the following CSS selector in the Styles tab of Chrome 37's developer tools: I've also seen a selector with pseudo selector ::shadow . So, what do /deep/ and ::shadow in a CSS selector mean? 回答1: As Joel H. points out in the comments, Chrome has since deprecated the /deep/ combinator, and it gives a syntax error in IE. HTML5 Web Components offer full encapsulation of CSS styles. This means that: styles defined within a component cannot leak out and effect the rest

Share style across web components “of the same type”

阅读更多关于 Share style across web components “of the same type”

问题 If I understand it correctly, creating an instance of a web component can be summed up as creating a shadow root and copying the markup, e.g. from a template into it: var Template = document.querySelector('#myTemplate'); var TemplateClone = document.importNode(Template.content,true); TargetElement.appendChild(TemplateClone); Of course, if the template contains css rules in a style-tag, those will be copied as well. Thus we can have scoped styles which belong to the internal markup of a web

Accessing elements in the shadow DOM

阅读更多关于 Accessing elements in the shadow DOM

问题 Is it possible to find elements inside the Shadow DOM with python-selenium? Example use case: I have this input with type="date" : <input type="date"> And I'd like to click the date picker button on the right and choose a date from the calendar. If you would inspect the element in Chrome Developer Tools and expand the shadow-root node of the date input, you would see the button is appearing as: <div pseudo="-webkit-calendar-picker-indicator" id="picker"></div> Screenshot demonstrating how it