shadow-dom | 易学教程

How to skip the Shadow DOM (and use the Light DOM) instead for Polymer templates

阅读更多关于 How to skip the Shadow DOM (and use the Light DOM) instead for Polymer templates

问题 Sometimes you may want to skip the Shadow DOM completely with Polymer. 回答1: You can force your Polymer Element's template into the Light DOM by overriding parseDeclaration on your Polymer() JS/Coffeescript declaration. Coffeescript Example: Polymer "my-element", parseDeclaration: (elementElement) -> @lightFromTemplate(@fetchTemplate(elementElement)) Of course, you have to be careful because if you have anything that belongs in the Shadow DOM (like a stylesheet) in your template, it will now

Shadow DOM on textarea in iOS forces padding

阅读更多关于 Shadow DOM on textarea in iOS forces padding

问题 I am experiencing an issue which puzzles me a bit. My reference for this issue is Chrome 32 on Mac and Safari on iOS 7.0.4. In the following example, Chrome renders the text in the .background and textarea elements perfect and on top of each other, this is what I want. Safari on iOS though, offsets the text in the textarea with 3 pixel-units. This happens although padding, border and margin are set to the same values on both elements. When I am debugging in Safari's developer tools, both

Element transclusion

阅读更多关于 Element transclusion

问题 Is there something like angularjs directive's transclude attribute in polymer? Something what allows me to include some elements to a specific place in template? I would like to achieve something like following: <my-header title="My title"> <my-header-item name="Item 1"></my-header-item> <my-header-item name="Item 2"></my-header-item> </my-header> which might be expressed: <h1>My title</h1>  <ul> <li>Item 1 <!-- given by my-header-item -

Polymer2.0- Trying to download DIV content of custom element

阅读更多关于 Polymer2.0- Trying to download DIV content of custom element

问题 I am trying to download div content of custom element using document.getElementById of the div and trying to implement download option from the JS FIddle - http://jsfiddle.net/evx9stLb/ From console, I am getting below error pen.js:6 Uncaught TypeError: Cannot read property 'innerHTML' of null at download (pen.js:6) at HTMLButtonElement.onclick (index.html:15) HTML: <head> <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/"> <link rel="import" href=

How to Load Square Payment Form in Shadow DOM

阅读更多关于 How to Load Square Payment Form in Shadow DOM

问题 I am trying to create a Web Component for the Square Payment form, but am having trouble getting it to load into the shadow DOM. I am wondering whether or not this is possible, since the form is populated with a script from the Square CDN. Has anyone had any luck with this use case? I am using code from an example on https://docs.connect.squareup.com/articles/adding-payment-form and inserting it into a Web Component template. The full code example is on Codepen. https://codepen.io/kvnapavl

Why does `color` affect shadow roots?

阅读更多关于 Why does `color` affect shadow roots?

问题 I noticed that when I do the following (note: this is Shadow DOM v1!) let div = document.querySelector('div'); let root = div.attachShadow({mode: 'closed'}); let span = document.createElement('span'); span.textContent = 'Super hot!'; root.appendChild(span); *{ background: rgba(0,0,0,.1); color: rgba(0,0,0,.4); } <div></div> The color property is propagated in to the shadow root, whilst the background property is not. Which part of the specification defines this behavior and why is this? I was

style not applied to dynamic content in polymer web-component

阅读更多关于 style not applied to dynamic content in polymer web-component

问题 I recreate an h2-element here: <link rel="import" href="../../js/lib/polymer/polymer.html"> <dom-module id="x-custom"> <style> h2 { color: green; } </style> <template> <div id="content"> <h2>TEST</h2> </div> </template> <script> (function() { Polymer({ is: 'x-custom', ready: function() { this.$.content.innerHTML = '<h2>TEST 2</h2>'; this.updateStyles(); } }); })(); </script> </dom-module> If I skip the ready-function "TEST" is green, but not "TEST 2". Thought updateStyles() may fix this, but

polymer /deep/ selector is not working in mobile devices

阅读更多关于 polymer /deep/ selector is not working in mobile devices

问题 I trying to rearrange layouts when device screen is resized, so i do this: if(screenOrientation == SCREEN_ORIENTATION_LANDSCAPE) { document.querySelector("html /deep/ [landscape-horizontal]").removeAttribute('vertical'); document.querySelector("html /deep/ [landscape-horizontal]").setAttribute('horizontal', ''); } This is working in the desktop machine correctly, but in mobile (both android phone, tablet and iOS simulator) i got this error: "Uncaught SyntaxError: Failed to execute

Google analytics inside shadow DOM doesn't work

阅读更多关于 Google analytics inside shadow DOM doesn't work

问题 In my chrome extension instead of using any html pages, shadow DOM is being added from the background js pages. It seems like no events are being pushed for analytics. After adding the extension as shadow root the structure looks as follows Now the chrome extension manifest.json looks like "manifest_version": 2, "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", "background": { "scripts": ["js/background.js"], "persistent": true }, and few

Attached ShadowRoot using Polyfill is not query-able

阅读更多关于 Attached ShadowRoot using Polyfill is not query-able

问题 In the following sample, I am trying to create a menu component to experiment component hierarchy. 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-ua-compatible" content="ie=edge"> <title>Sample Menu App</title> <script src="js/webcomponents-lite.js"></script>  <link rel="import" href="components