shadow-dom

Use a remote stylesheet inside a template tag (with shadow dom)

由 孤者浪人 提交于 2019-12-03 10:42:13
I am trying to make a semi-resuseable widget but I am running into a problem. I am trying to encapsulate a some CSS code inside a shadow root so that it does not affect the rest of the webpage but this CSS is used across multiple widgets so I am trying to include a remote stylesheet. None of the examples I have found use a remote style sheet and I was wondering if this was possible. EX: <template id="templateContent"> <head> <link rel="stylesheet" href="css/generalStyle1.css"> </head> <body> <div class="affectedByGeneralStyle1"></div> </body> </template> script to include template: <div id=

Does Angular 2 use Shadow DOM or a Virtual DOM?

由 假装没事ソ 提交于 2019-12-03 06:32:32
问题 What does Angular 2 use to update the DOM. Is it Shadow DOM or Virtual DOM ? Was there any such concept in Angular 1? 回答1: Angular2 doesn't use shadow DOM (default) nor virtual DOM . With encapsulation: ViewEncapsulation.Emulated (default) there is no shadow DOM because style encapsulation is only emulated. encapsulation: ViewEncapsulation.Native enables shadow DOM on browsers that support it natively or it's again emulated when the webcomponents polyfill is loaded. Shadow DOM is also not

Does the shadow DOM replace ::before and ::after?

由 心不动则不痛 提交于 2019-12-03 05:15:36
CSS Scoping says The descendants of a shadow host must not generate boxes in the formatting tree. Instead, the contents of the active shadow tree generate boxes as if they were the contents of the element instead. CSS Pseudo-Elements describes ::before and ::after as these pseudo-elements generate boxes as if they were immediate children of their originating element So which of these is true? First, all the contents of the shadow host (not including ::before and ::after ) are replaced by the contents of the active shadow tree. And then, ::before and ::after generate boxes in the shadow host.

How to distribute (insert) content nodes programmatically

由 北城以北 提交于 2019-12-03 04:03:53
Is there a way to programmatically distribute (insert) content from lightDOM to ShadowDOM? I would like to wrap every single child node into an element. For example : <my-list> <span>first element</span> <div>second element</div> <a>third element</a> </my-link> to be distributed as <my-list> <ul> <li> <span>first element</span> </li> <li> <div>second element</div> </li> <li> <a>third element</a> </li> </ul> </my-link> I need it not only to render that way, but also delegate entire HTML behavior (bindings, events, etc..) as each distributed node may contain entire app. I have tried appending

Does Angular 2 use Shadow DOM or a Virtual DOM?

由 旧街凉风 提交于 2019-12-02 20:11:50
What does Angular 2 use to update the DOM. Is it Shadow DOM or Virtual DOM ? Was there any such concept in Angular 1? Günter Zöchbauer Angular2 doesn't use shadow DOM (default) nor virtual DOM . With encapsulation: ViewEncapsulation.Emulated (default) there is no shadow DOM because style encapsulation is only emulated. encapsulation: ViewEncapsulation.Native enables shadow DOM on browsers that support it natively or it's again emulated when the webcomponents polyfill is loaded. Shadow DOM is also not targeting performance as virtual DOM is, but style encapsulation. Angular2 doesn't use virtual

Why does my Web Component CSS not show? I am not using shadowDOM

由 北城余情 提交于 2019-12-02 17:07:35
问题 I have a Native V1 component that is not using shadowDOM so I place my CSS in the <head> . But when someone else uses my component my CSS no longer works. This only happens if their component does use shadowDOM. Example Code for my component: class MyEl extends HTMLElement { constructor() { super(); } connectedCallback() { this.innerHTML = `<div class="spaced"><button class="happy-btn">I'm Happy</button></div> <div class="spaced"><button class="sad-btn">I'm Sad</button></div>`; } } // Define

Nested Polymer Components Content Issue

由 百般思念 提交于 2019-12-02 12:22:04
foo.html: <link rel="import" href="bar.html"> <dom-module id="p-foo"> <template> <p-bar> <content select=".myContent"></content> </p-bar> </template> <script> Polymer( { is: 'p-foo', } ) </script> </dom-module> bar.html: <dom-module id="p-bar"> <template> bar open <content select=".myContent"></content> bar closed </template> <script> Polymer( { is: 'p-bar', } ) </script> </dom-module> demo.html: <!DOCTYPE html> <html> <head> ... <link rel="import" href="foo.html"> </head> <body> <p-foo><div class="myContent"><strong>hello</strong></div></p-foo> </body> </html> The expected output: bar open

Light DOM style cascades down to the shadow DOM

由 不羁的心 提交于 2019-12-02 12:18:14
问题 I have created a custom element with polymer. When the element is included within an h2 , it inherits the h2 's boldness and font-size . I need my components to be sheltered from the outside world and not be affected by light dom styles. How can I achieve this if the light DOM cascades down? To be more specific, check out the following: 回答1: This appears to be by design: The top-level elements of a shadow tree inherit from their host element. The host element in this case is the h2 . You will

Why does my Web Component CSS not show? I am not using shadowDOM

由 穿精又带淫゛_ 提交于 2019-12-02 10:28:50
I have a Native V1 component that is not using shadowDOM so I place my CSS in the <head> . But when someone else uses my component my CSS no longer works. This only happens if their component does use shadowDOM. Example Code for my component: class MyEl extends HTMLElement { constructor() { super(); } connectedCallback() { this.innerHTML = `<div class="spaced"><button class="happy-btn">I'm Happy</button></div> <div class="spaced"><button class="sad-btn">I'm Sad</button></div>`; } } // Define our web component customElements.define('my-el', MyEl); button { padding: 8px 20px; } .happy-btn {

CSS selector for shadow root or all top level elements in shadow root

由 走远了吗. 提交于 2019-12-02 10:19:21
问题 I need a selector for usage in css inside a shadow root, which selects all children (but not grand children) of the shadow root, no matter what tag they are and without giving them an ID. In the example below, SPAN,A,P and DIV should get a red border, but SPAN IN DIV not. <my-element> #shadow-root <span>SPAN</span> <a>A</a> <p>P</p> <div> DIV <span>SPAN IN DIV</span> </div> <style> :root>*{border:1px red solid;} </style> </my-element> I hoped, the :root -Selector would do the job inside of a
订阅 shadow-dom