shadow-dom

问题 I know that the spec currently only allows compound selectors for ::slotted, i.e. ::slotted(my-first + my-second) is not allowed, but should something like this be working? ::slotted(x-first) + ::slotted(x-second) { /* css */ } Is there any way to target slotted siblings (other than with global css)? And if not, where would I file such a request? Thanks. 回答1: Sure you can select siblings of slots / slotted . The thing you can not do is select a element which has been slotted and is not a top

问题 Using CKeditor angular component How to set the editor height? According to the docs, it can be done by setting the editor style to: min-height: 500px !important; But it doesn't work! 回答1: If you add it to the global stylesheet the following should work: .ck-editor__editable_inline { min-height: 500px !important; } But if you want to style through the component.css you need to type this: :host ::ng-deep .ck-editor__editable_inline { min-height: 500px !important; } 来源： https://stackoverflow

问题 I would like to use an anchor-element with a hash-URL inside of a custom element that uses shadow DOM. I would expect, that the browser scrolls down to that anchor, but it does not do it (at least Chrome). Detail: I have an index.html like this: ... <a href="#destinationInsideShadowDOM">Jump</a> ... <my-custom-element></my-custom-element> ... And another html-file for the custom-element, which contains the anchor: <template id="my-custom-element"> ... <a id="destinationInsideShadowDOM"></a> .

问题 Version 1.0 of Shadow DOM will completely replace the <content> tag with <slot> . There are examples on the web I cannot find a relevant discussion which justifies this change. What was the problem with <content> , which <slot> will solve? After all the new design is completely different. 回答1: The editor of Shadow DOM specification is here. It would be difficult to summarize the reason here, however, the following discussions and the minutes might be helpful to understand the history and the

问题 I think shadow DOM lets us achieve style encapsulation and also hiding HTML implementation of the component. But when I inspect shadow root in chrome I can see the HTML of the component. So what exactly does it help us to achieve? Is it only style encapsulation? 回答1: Sure, the DevTools allow you to investigate the shadow DOM but if you get the HTML for index.html querySelector('body').innerHTML the shadow DOM of the elements is not included. You explicitly need to switch to the shadow DOM of

问题 I'm currently using polymer's core-scaffold & co. to create an header/sidebar with a content area. I'm currently having the problem that I cannot access certain properties of the content element, such as scrollTop. (since the actual scrollTop property that I need to access is defined in the shadow DOM.) This conflicts with a lazyload jquery plugin I'm using. The plugin is checking the window.scrollTop but changing the plugin to check the scrollTop of my content (that scrolls instead of the

问题 I'm trying to extend the HTMLOptionElement , <template id="cOptionTemplate"> <content></content> </template> <select> <option is="custom-option">Test</option> </select> var cOption = document.registerElement('custom-option', { prototype: Object.create(HTMLOptionElement.prototype, { createdCallback: { value: function() { var template = document.getElementById("cOptionTemplate") var clone = document.importNode(template.content, true); this.createShadowRoot().appendChild(clone); } },

问题 I'm trying to create a Polymer element for contenteditable. I create a contenteditable div, place this.innerHTML there, and it becomes editable. All good with polyfills, e.g. in Firefox. But it doesn't work in Chrome 35 with native Shadow DOM. Well, it is still editable, but neither document.execCommand nor window.getSelection is working. document.execCommand does nothing. window.getSelection().getRangeAt(0).toString() is defined but empty. No error is shown. So I cannot style the selection.

问题 Protractor 1.7.0 has introduced a new feature: a new locator by.deepCss which helps to find elements within a shadow DOM. Which use cases does it cover? When would you want to reach elements in the shadow DOM? The reason I ask the question is that I'm missing on the motivational part of the matter - I thought about protractor mainly as a high-level framework that helps to mimic real user interactions. Accessing shadow trees sounds like a very deep down technical thing and why would you want

问题 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