shadow-dom

Shadow DOM v1 CSS polyfill

由 被刻印的时光 ゝ 提交于 2019-12-23 10:07:09
问题 https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom This got me all excited I could write my own custom webpage from scratch without polymer. Only to find out css :host for example is not working in Edge and FireFox. I can deal without html import for now until w3c figured out what they want to do with es6 modules, but each browser having their own half implemented Shadow DOM version without css is pushing my buttons. So I still need a full polymer stack to have

attachShadow vs createShadowRoot

由 不想你离开。 提交于 2019-12-23 09:10:23
问题 I read in mozilla doc, Element.createShadowRoot() is deprecated: This method has been deprecated in favor of attachShadow. But in my canary: chrome 49.0.2599.0 thats work: var shadow = document.getElementById("node-sh").createShadowRoot(); And thats not work var shadow = document.getElementById("node-sh").attachShadow({mode: 'closed'}); Anyone know what's right? 回答1: createShadowRoot() is the old way of attaching a shadow-root to host element. It was proposed in initial spec, which has then

attachShadow vs createShadowRoot

由 女生的网名这么多〃 提交于 2019-12-23 09:09:37
问题 I read in mozilla doc, Element.createShadowRoot() is deprecated: This method has been deprecated in favor of attachShadow. But in my canary: chrome 49.0.2599.0 thats work: var shadow = document.getElementById("node-sh").createShadowRoot(); And thats not work var shadow = document.getElementById("node-sh").attachShadow({mode: 'closed'}); Anyone know what's right? 回答1: createShadowRoot() is the old way of attaching a shadow-root to host element. It was proposed in initial spec, which has then

Determine if user clicked outside shadow dom

由 一笑奈何 提交于 2019-12-23 08:00:36
问题 I'm trying to implement a dropdown which you can click outside to close. The dropdown is part of a custom date input and is encapsulated inside the input's shadow DOM. I want to write something like: window.addEventListener('mousedown', function (evt) { if (!componentNode.contains(evt.target)) { closeDropdown(); } }); however, the event is retargeted, so evt.target is always the outside the element. There are multiple shadow boundaries that the event will cross before reaching the window, so

Does low-power mode on iOS11 impact pseudo-elements that modify Shadow DOM elements?

由 旧巷老猫 提交于 2019-12-23 07:28:18
问题 In normal power mode, on iOS11 (tested on iPhone 8 and X), I am able to hide a button element overlay inside the shadow root of a video element. Once low power mode is enabled, my pseudo-element is no longer able to hide the button element overlay. What's going on? How can I hide the button element in low power mode? My CSS // Placed outside Shadow DOM in my SCSS file. video::-webkit-media-controls-start-playback-button { display: none !important; } DOM element to be modified <video style=

Does low-power mode on iOS11 impact pseudo-elements that modify Shadow DOM elements?

由 佐手、 提交于 2019-12-23 07:28:08
问题 In normal power mode, on iOS11 (tested on iPhone 8 and X), I am able to hide a button element overlay inside the shadow root of a video element. Once low power mode is enabled, my pseudo-element is no longer able to hide the button element overlay. What's going on? How can I hide the button element in low power mode? My CSS // Placed outside Shadow DOM in my SCSS file. video::-webkit-media-controls-start-playback-button { display: none !important; } DOM element to be modified <video style=

Check if element contains #shadow-root

由 丶灬走出姿态 提交于 2019-12-23 07:00:48
问题 Is it possible to see if a Shadow DOM element exists? I'm not too concerned with manipulating it, or even really targeting it per-say. I understand the reasoning of the encapsulation. But I'd like to be able to style other elements in the regular DOM, based on whether or not the Shadow DOM element is present. Sort of like: if ( $('#element-id #shadow-root').length ) { // true } Or if not for the shadow-root, at least a specific element within, like the id of a div. So if that div exists, then

How to attach a keyup event to Custom Element shadowRoot

由 只愿长相守 提交于 2019-12-23 06:05:38
问题 I have searched for some time; but only find Polymer answers; or answers where EventListeners are put on DOM elements inside the shadowRoot. The effect I am trying to achieve with native Custom Elements: Only the focussed element should accept (and display) a keypress It is possible to attach a click event to the shadowRoot, it seems I am doing something wrong for the 'keyup' event. If I put the EventListener on the window all elements (of course) update with the same key info. window

I have an element that i have declared as a shadow dom but the style is affecting the other elelemts

由 回眸只為那壹抹淺笑 提交于 2019-12-23 04:47:09
问题 The code is <html> <head> </head> <script src="https://cdnjs.cloudflare.com/ajax/libs/document-register- element/1.7.2/document-register-element.js"></script> <div id = "1"> <style> div { height: 30px; width: 30px; background-color: brown; } </style> </div> <script> document.getElementById('1').attachShadow({mode: "open"}) </script> <div id = "2"></div> <div id = "3"></div> </body> </html> and the jsfiddle link is https://jsfiddle.net/o5r229hf/ I have declared div id 1 as a shadow dom but div

AngularDart NgComponent using event listeners in the controller

由 ￡可爱￡侵袭症＋ 提交于 2019-12-22 18:48:28
问题 I have an NgComponent in Angular Dart which instantiates a search box and according to the query strings it populates another div in my html template with the ng-repeat directive. More precisely, Query string update: there is a binding to the input text value with a field in my components' controller. Results population: In the attach() method I added a watcher for the local field which acts as a model to the input box, and whenever it changes I add to a local list some items which then acts
订阅 shadow-dom