shadow-dom

CustomElements not working in Firefox with about:config properties enabled

由 拈花ヽ惹草 提交于 2019-12-11 07:23:30
问题 CanIuse says that webcomponents v1 is enabled in Firefox v. 61 with the about:config properties dom.webcomponents.customelements.enabled and dom.webcomponents.shadowdom.enabled set to true. And many posts and articles on the web agree with that. So I have Firefox version 61.0.2 with the aforementioned properties set, and I have a custom element defined as shown below. This renders as expected in Chrome, but in Firefox there is simply nothing rendered and no errors on the console. <template id

Must I append style element to all ShadowDOM?

由 随声附和 提交于 2019-12-11 05:48:52
问题 CSS space between outer ShadowDOM and inner ShadowDOM is separated. <style> .foo a.bar { text-decoration: none; color: skyblue; } </style> <div class="foo"> <a id="a1" class="bar">baz</a> <custom-element> (shadow) <a id="a2" class="bar">baz</a> (/shadow) </custom-element> <custom-element> (shadow) <a id="a3" class="bar">baz</a> (/shadow) </custom-element> </div> In above code, #a1 is applied style, but #a2 and #a3 are not. So, I always append style element for each ShadowDOM. The content of

Expose specific element in ShadowDom to external JS using document.getElementById

由 ￣綄美尐妖づ 提交于 2019-12-11 04:27:20
问题 I have a v0/Polymer 1 web component that I am upgrading to v1/Polymer 2. This web component dynamically builds a URI that loads an external JavaScript file. The external JavaScript file runs and loads an <iframe> into a <div> of my component. This external JS contains document.getElementById to load the <iframe> into the specified <div> . I have searched and haven't found a way to force the <div> element to be exposed/placed in the shady DOM . I have read that if I design the component

Correct way to apply global styles into Shadow DOM

由 时光总嘲笑我的痴心妄想 提交于 2019-12-11 04:25:55
问题 This questions is similar to some other on StackOverflow, but I couldn't find any answer describing applicable to my situation and non-deprecated method (and I'm starting thinking that maybe there is no any good solution for that situation). Let's say we have some main.css file which includes common styles for buttons, lists, links and so on. So it's just some standard .css file which contains common styles that we want to reuse across the application. And we want to apply the same styles to

Webcomponents Polyfill not working

由 北城余情 提交于 2019-12-11 04:18:57
问题 I am trying to polyfill webcomponents as explained at https://www.webcomponents.org/polyfills/ since I wanted my sample app to work on both Chrome and Firefox. However I am getting ReferenceError: customElements is not defined error in Firefox. See my code below on the index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="x

Styling descendent element in slotted element

由 谁说我不能喝 提交于 2019-12-11 03:45:55
问题 Is it possible to select descendent element in slotted element? Example like this: ::slotted(div p) { color: blue; } <div><p>test</p><div> It doesn't work 回答1: No, you can only select top-level nodes with ::slotted() . The selector inside ::slotted() can only be a compound selector, so div p is not a valid one. According to Hayato Ito : The reason of this restriction is to make a selector style-engine friendly, in terms of performance. See the styling example in the Shadow Dom v1 presentation

using shadow dom in Internet Explorer

由 天涯浪子 提交于 2019-12-11 03:26:32
问题 The below code works in chrome but not in Internet Explorer. Is there any way to use it in Internet Explorer? <html> <head></head> <body> <div> <h4>My Content Heading</h4> <p>My content text</p> </div> <script> var myContent = document.querySelector('div'); var shadowroot = myContent.createShadowRoot(); shadowroot.innerHTML = '<h2>Inserted Heading</h2> <content select="p"></content>'; </script> </body> </html> 回答1: Internet explorer (and new Edge browser) doesn't support shadow DOM natively.

How to apply global css to web components through shadow-dom

由 大憨熊 提交于 2019-12-11 03:21:37
问题 I'm working on a lit-element project, and I got a problem that reset.css cannot be applied to web components wrapped with shadow-root I've tried this way, and I got this following error. Refused to apply style from 'http://localhost:8080/style/static/reset.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. The code I tried is this: <script> var css = new CSSStyleSheet() css.replace('@import url("./style/static/reset.css")')

Theme css selectors with React JS/Polymer

由 可紊 提交于 2019-12-11 02:29:04
问题 I'm working with a project that uses ReactJS and I'd like to modify the theme. I'm running into an issue writing the css selectors for my theme styles. It looks like reactjs uses some shadow dom which breaks css selectors across components. It looks like polymer uses shadow dom which breaks css selectors across components (by design). <div id="root" class="light-theme"> <style> .light-theme .bg-theme { background-color: white; } </style> <parent-element> <child-element class="bg-theme"> <

How to pass option tags to a custom element as distributed nodes (aka <slot></slot>)

由 ◇◆丶佛笑我妖孽 提交于 2019-12-11 01:38:44
问题 I have a web component custom element defined like so. <template id="dropdown-template"> <select> <slot></slot> </select> </template> <script> class Dropdown extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); let template = document.getElementById('dropdown-template'); shadowRoot.appendChild(template.content.cloneNode(true)); } } customElements.define("drop-down", Dropdown); </script> When trying to use it, I try and pass option tags with
订阅 shadow-dom