shadow-dom

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 seems to work. You could try body { /* body styles here */ } but styles in components are not supposed to

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? Drew Noakes 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 of the page styles defined at the page level do not modify the component's own styles However

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 component. Questions: Does it have any performance implications when I create tons of instances of the

When a component is rendered, content inside it is ignored, for example: import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: '<div>{{title}}</div>', }) export class AppComponent { title = 'app works!'; } Using it like: <app-root>Ignored content</app-root> Renders: <div>app works!</div> But looking at PrimeNg dialog, they use components like this: <p-dialog [(visible)]="display"> <p-header> Header content here </p-header> Content <p-footer> Footer content here </p-footer> </p-dialog> As Header content here , Content and Footer content here are inside the

I want to always show up/down arrows for input "number" field. Is this possible? So far I haven't had any luck... http://jsfiddle.net/oneeezy/qunbnL6u/ HTML: <input type="number" /> CSS: input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: "Always Show Up/Down Arrows"; } You can achieve this (in Chrome at least) by using the Opacity property: input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity: 1; } As stated above, this will likely only work in Chrome. So be careful using this code

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 looks in Chrome: Finding the "picker" button by id results into NoSuchElementException : >>> date_input