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 … Read more
They are different things for different purposes, so comparing performance doesn’t make sense. Virtual DOM Virtual DOM is about avoiding unnecessary changes to the DOM, which are expensive performance-wise, because changes to the DOM usually cause re-rendering of the page. Virtual DOM also allows to collect several changes to be applied at once, so not … Read more
Add <ng-content></ng-content> to the component’s template where the content should be projected: @Component({ selector: ‘app-demo’, template: ‘<div>{{title}}</div> <br> <ng-content></ng-content>’, }) export class DemoComponent { title=”Works!”; } Content to be projected: <app-demo>This is projected content!</app-demo> The output will be: Works! This is projected content! Here is a great article about Angular Content Projection (Angular 1 Transclusion): … Read more
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 in the wild without a fallback for other browsers.