shadow-dom | 易学教程

Javascript not executing inside shadow DOM

阅读更多关于 Javascript not executing inside shadow DOM

问题 I am working on an application where I've to load other html webpages to current page. Other webpages are independent applications. I am trying to load webpage in shadow DOM. For that I've used below code, where it will try to import test-template.html in shadowRoot. Here I am not using template tag, because I've to render template dynamically (Using ajax). <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <input type="button"

Polymer core-submenu styling in Firefox?

阅读更多关于 Polymer core-submenu styling in Firefox?

问题 This may be a more general purpose question than how I stated it, but I wanted to be specific as possible. I'm not sure how to use jsFiddle with Polymer, with all of the imports, but I hope some code samples will suffice. I have a core-menu that looks like this: <core-menu> <core-submenu label="First submenu"> <core-item label="Test submenu item 1"> <core-item label="Test submenu item 2"> <core-item label="Test submenu item 3"> <core-item label="Test submenu item 4"> </core-submenu> <core

How to create shadow DOM programmatically in Dart?

阅读更多关于 How to create shadow DOM programmatically in Dart?

问题 I'm trying to implement the following JS code in Dart way: Code is taken from here: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ <div id="host">Host node</div> <script> var root = document.querySelector('#host').createShadowRoot(); root.innerHTML = '<style>' + 'button {' + 'color: green;' + '}' + '</style>' + '<content></content>'; </script> I have no doubt that in JS it works ok, but in Dart it fails. As we know the only one dart script per document is allowed, so I

Inspect shadow dom with Firefox

阅读更多关于 Inspect shadow dom with Firefox

问题 Is there a way to inspect shadow dom elements in Firefox like you can do with the Chrome dev tools? 回答1: Yes, we have added shadow DOM inspection to Firefox 65.0+ DevTools. Shadow DOM in normal content pages is always displayed e.g. By default shadow DOM for built in browser features is not displayed e.g here is a video element: To enable viewing of the Shadow DOM for built in features: Go to about:config Set devtools.inspector.showUserAgentShadowRoots to true After changing this setting you

webcomponents - hide dropdown menu on window.onclick

阅读更多关于 webcomponents - hide dropdown menu on window.onclick

问题 dropdown menu is created in shadowDOM almost perfect, but the problem is how to hide the dropdown menu when click on any where else in window class NavComponent extends HTMLElement { constructor() { super(); let template = document.currentScript.ownerDocument.querySelector('template'); let clone = document.importNode(template.content, true); let root = this.attachShadow({ mode: 'open' }); root.appendChild(clone); } connectedCallback() { let ddc = this.shadowRoot.querySelectorAll('

How to change style of combo box in Vaadin 10

阅读更多关于 How to change style of combo box in Vaadin 10

问题 I would like to adapt a combo box component's CSS. The combo box has my style class custom1 added which should disable border radius for left corners. In my shared-styles.html , I tried to adapt CSS properties: .custom1 { --lumo-border-radius: 0px; } This is changing the styles but it is not exactly what I want. According to docs, I should follow this wiki to apply local scope styles for the web component. So, I tried: <custom-style> <style> ... </style> </custom-style> <dom-module id="my

Webcomponents.js issue on IE and Firefox

阅读更多关于 Webcomponents.js issue on IE and Firefox

问题 I try to make a simple web component. For browser compatibility, I use the NPM package webcomponents.js (version 0.7.23). I run my little code with Polyserve. My code is on Github: https://github.com/olofweb/Webcomponents On Chrome (version 55) -> ok On IE (version 11) -> ko On Firefox (version 50.1) -> ko Error: https://github.com/olofweb/Webcomponents/blob/master/hello-world.html#L31 IE 11 (sorry, I don't have the english error) : "L'objet ne gère pas la propriété ou la méthode

Shadow DOM not shown in Custom Element with Shadow Root when inspected on Salesforce (Rabbit hole)

阅读更多关于 Shadow DOM not shown in Custom Element with Shadow Root when inspected on Salesforce (Rabbit hole)

问题 I'm trying to understand how Salesforce have implemented their custom lightning component elements. I've read some of the help docs which imply they're following webcomponents standards. When I inspect the page: So this looks like typical DOM structure, but when you go into the console and look into the lightning-icon it says there's no childNodes unless you go into the shadow dom: > document.querySelector('lightning-icon.slds-icon-standard-home').childNodes > NodeList {Symbol(items): Array(0

Ionic 4 custom styling Shadow DOM

阅读更多关于 Ionic 4 custom styling Shadow DOM

问题 Been trying to change footer background but I cant get it right. I have a color for each tag but only the last tag is changed (blue - #0000ff) . How does one do styling in Ionic 4? <template> <ion-footer> <ion-toolbar> <ion-title v-if="loggedIn"> <a href="https://www.facebook.com/" target="_blank"> <ion-icon name="logo-facebook"></ion-icon> </a> <a href="https://www.instagram.com/" target="_blank"> <ion-icon name="logo-instagram"></ion-icon> </a> </ion-title> </ion-toolbar> </ion-footer> <

Global CSS for an app with web components

阅读更多关于 Global CSS for an app with web components

问题 I'm developing a web application that uses HTML 5 native web components. My problem is that I have a lot of common CSS for all of these and I use font awesome to have nice icons. Right now I put all my styles inside "/deep" shadow piercing but Chrome says : "/deep/ combinator is deprecated." Do you have any suggestions on how can I have global CSS and CSS libraries (like font awesome) available on the whole app ? Thanks :) 回答1: You could include the CSS font file globally, with the <link rel=