FAQ Database Discussion Community


How do I change the Z-depth property in Google Polymer when I hover over my element?

jquery,css,polymer,shadow-dom
The code below is my attempt to change the Polymer Z-depth of a paper shadow element when a user hovers over the paper-shadow element. However this doesn't work and I'm not sure why, not that I expect it to work. <link rel="import" href="../components/core-animated-pages/core-animated-pages.html"> <link rel="import" href="../components/core-animated-pages/transitions/hero-transition.html"> <link rel="import" href="../components/paper-button/paper-button.html"> <link...

Accessing elements in the shadow DOM

python,selenium,selenium-webdriver,shadow-dom
Is it possible to find elements inside the Shadow DOM with python-selenium? Example use case: I have this input with type="date": <input type="date"> And I'd like to click the date picker button on the right and choose a date from the calendar. If you would inspect the element in Chrome...

How to style lightDOM from shadowDOM (without using ::content)?

html,polymer,dart-polymer,shadow-dom
I try so solve the following problem. Please, see example: custom-elements.html <polymer-element name="ui-nav" class="_row _columned _cols-2 mobile_cols-12" noscript> <template> <content></content> </template> </polymer-element> index.html <ui-nav> <div>Привет русским</div> <div>Контакты</div> <div>О себе</div> </ui-nav> main.css ._row {display: block;} ._row [class*="_cols-"] {float:left;} ._cols-2 > * {width: 20%;} ... The...

How do I fix this custom element element implementation?

html5,web-component,shadow-dom
I am trying to create a "transcluded" version of a custom element where when it wraps some arbitrary HTML it will selective pick content from that wrapped mark-up and render it within its shadow DOM body. Like so: <tab-content> ..... <span class="name">John</span> <span class="email">Email</span> ..... </tab-content> When I use the...

Web Component: How to access Shadow DOM through script in parent tag?

html5,web-component,shadow-dom
I want to access a tag in Shadow DOM using a JavaScript code which is loaded in the importing file. Say, my custom element has a div <div>I am custom element</div> I want to access this tag from the script that is loaded in the importing file of the custom...

Polymer Dart, global variables and data bindings (observable)

dart,dart-polymer,shadow-dom
I read Polymer API developer guide, but unfortunately it has examples only for JavaScript developers. Some examples I try to port into Dart, but in this case I get fail. Please, go to https://www.polymer-project.org/0.5/docs/polymer/polymer.html#global (Section Supporting global variables). Here is a clip from the documentation: elements.html <polymer-element name="app-globals"> <script> (function()...

Access children of a custom element shadow dom

javascript,google-chrome,dom,polymer,shadow-dom
I have a custom element using mr. Ruyadornos simple-slider element. (I am working on chrome) won-thumbnail.html <link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="SimpleSlider/simple-slider.html"> <polymer-element name="won-thumbnail" noscript> <template> <simple-slider style="width:200px; height: 100px;"> <img src="http://placekitten.com/g/612/613" /> <img src="http://placekitten.com/g/612/614" /> </simple-slider> </template>...

How do I bind a function to elements inside of a Shadow DOM?

javascript,html,web-component,shadow-dom,custom-events
I'm working with Web Components and try to bind a click event to an element inside of the Shadow DOM. 1. component.html included as <link rel="import" ...> inside of index.html <template id="my-element"> <section> <header> <content select="h1"></content> <button></button> </header> <content select="div"></content> </section> </template> 2. later element usage: <my-element> <h1>Headline</h1> <div>...</div> </my-element>...

Styling custom HTML elements

css,web-component,shadow-dom,custom-element
I created a vanilla Custom Element: document.registerElement("my-el", { prototype: Object.create(HTMLElement.prototype) }); The element uses Shadow DOM and <style> tags inside it. However, I want to make users define the size of the custom element in the main style sheet. It works by referencing the custom tag, but is this the...

How angular2 is going to use shadow dom while it's not supported in some popular browsers?

web-component,shadow-dom,angular2
From the documentations: When a component is instantiated, Angular creates a shadow DOM for the component. loads the selected template into the shadow DOM. creates a child Injector which is configured with the appInjector for the Component. But, as far as I know, shadow DOM is not supported yet in...

Using generated id from template in another function?

javascript,data-binding,polymer,shadow-dom
having a bit of trouble here. I need to play an audio file on-click of an image that I have. A bunch of images + their corrosponding audio files are set in my template (that works): <template> <div layout horizontal wrap center center-justified class="asdf"> <template repeat="{{s in carddata}}"> <sound-card> <img...

Light DOM style cascades down to the shadow DOM

css,polymer,web-component,shadow-dom
I have created a custom element with polymer. When the element is included within an h2, it inherits the h2's boldness and font-size. I need my components to be sheltered from the outside world and not be affected by light dom styles. How can I achieve this if the light...

POST https://localhost:26143/skypectoc/v1/pnr/parse net::ERR_CONNECTION_REFUSED

polymer,disqus,shadow-dom
I use DISQUS in my polymer site, i got this error about three hundreds,and i checked polymer-project.org ,it had the same problem. POST https://localhost:26143/skypectoc/v1/pnr/parse net::ERR_CONNECTION_REFUSED polymer-project.org site: my site:: and there are about three hundred requests! I use disqus-commnets element like this: <core-header-panel mode="waterfall-tall" tallClass="medium-tall" > <div class="core-header ">{{response[0].title}}</div> <div...

How do you access object properties from a nested polymer element?

javascript,polymer,shadow-dom
I would like to access javascript object data from a custom polymer element nested inside a list. The host page has the following: <core-list id="eventData"> <template> <event-card event="{{model}}"></event-card> </template> </core-list> With the following script: <script type="text/javascript"> var data = [ // server side code to populate the data objects here...

Using Shadow DOM with polyfills, platform.js and webcomponents.js

javascript,jquery,dom,shadow-dom
Currently Shadow DOM is supported by only Chrome and Opera (only webkit) and can be optionally enabled in Firefox, it can how ever be used in all browsers using webcomponents.js (https://www.polymer-project.org/0.5/docs/start/platform.html). Is someone already using this? Is it 100% compatible with other non-supported browsers, any help would be appreciated. (Ref...

Can get templateInstance value but can't use it for another function?

javascript,polymer,shadow-dom
I just recently figured out how to get the id of an element from one of my template instances and am trying to use it in another function, but although the console log returns the correct IDs, when I try to use them, like in my .play() function, it says...

Include markup in web component content insertion

web-component,shadow-dom
I have started to take a look at web components and the shadow DOM and have setup a simple demo. I have noticed that by setting an insertion point in my <template></template> and including it multiple times in the host it will iterate over each occurrence for one reference in...

Finding elements in the shadow DOM

selenium,selenium-webdriver,css-selectors,protractor,shadow-dom
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...

Polymer and Jquery selector

jquery,dom,polymer,shadow-dom
I have the following code using Polymer: <polymer-element name="new-post-page"> <template> <div id="trumbowyg-demo"></div> </template> <script> Polymer("new-post-page", { }); </script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script>window.jQuery</script> <script src="../../bower_components/trumbowyg/dist/trumbowyg.min.js"></script> <script>$('#trumbowyg-demo').trumbowyg();</script>...

Separate Content from Presentation using Shadow DOM

javascript,html5,shadow-dom
Reference: HTML5Rocks Shadow DOM 101 Question: How can I replace contents of <content></content from the #nameTagTemplate template? Problem: Currently my javascript replaces all of the template elements. HTML <div class="todo">Hey I'm a todo app</div> <template id="nameTagTemplate"> <style> .outer { border: 2px solid brown; } </style> <div class="outer"> <div class="boilerplate"> Hi!...

Inserting a toolbar into page using Shadow DOM

javascript,css,shadow-dom
How would I insert a "toolbar" style header into a page using the Shadow DOM that pushes down all other content? The process is well documented elsewhere using iframes, but doing so with the Shadow DOM is something I am struggling with. An iframe won't allow elements in the iframe...

Are there any Chrome-specific techniques to scope/isolate CSS?

css,google-chrome,google-chrome-extension,polymer,shadow-dom
I'm writing a Chrome extension that injects HTML into a displayed page. I want the injected HTML to have it's own style, protected from the CSS that may be present in the host page. I've tried using conventional CSS, and still suffer from style corruption from the host page. After...

Inspect HTML5 date picker shadow DOM

html,html5,html-input,shadow-dom
I'm trying to inspect the shadow DOM for certain HTML5 controls, like the date picker for the input type="date" and the actual suggestion dropdown list for inputs bound to a datalist. Preferably in Chrome, but other browsers will do too. I've found that by enabling the Shadow DOM setting in...

reset style inheritance not working in shadow dom

javascript,html,css3,web-component,shadow-dom
I'm using shadow dom to avoid my element's style from accidently affected by the host document,but it still inheritance some attributes from the parent,like the 'color','font-size','line-height',etc. After searching google,I have found that there exists one attribute which can be used to achieve this,and it's the 'resetStyleInheritance' attribute. I use the...

Importing styles into a web component

html5,web-component,shadow-dom
What is the canonical way to import styles into a web component? The following gives me an error HTML element <link> is ignored in shadow tree: <template> <link rel="style" href="foo.css" /> <h1>foo</h1> </template> I am inserting this using shadow DOM using the following: var importDoc, navBarProto; importDoc = document.currentScript.ownerDocument; navBarProto...