Web-components and HTML Java elements are managed on the server's side. For this, you need to establish node.js and bower. https://vaadin.github.io/elements-codelab/#0 And I hope the next video will help you how to properly connect the Polymer Library with Vaadin. https://www.youtube.com/watch?v=uuAxOsYlWrQ&t=55s

Try adding Polymer to the Path variable environment.

I'll be grateful for any information.Any information: Two versions of the Polymer components were found immediately to create a parallel. https://github.com/vguillou/parallax-element and https://github.com/winhowes/parallax-container ♪ The second option seems to me better, i.e., there are careful docks and an example in the repository. However, both decisions have not been updated for quite some time. However, it doesn't prevent at least touching them and getting any information. Anyway, there was a cat in the code.

https://elements.polymer-project.org/elements/paper-tabs#scrollable : If true, tabs are scrollable and the tab width is based on the label width.Found it here: https://stackoverflow.com/questions/28197910/variable-width-for-polymer-paper-tabs

We can use CSS. calc and calculate the minimum height of the block main:<style> main { min-height: calc(100% - Xpx); } footer { background: green; height: Xpx; } </style> General X If you don't have any other elements, in the case of the heading, you'll have to take it into account.

I found an answer to my question here. https://github.com/Polymer/pwa-starter-kit/issues/196

Shadow DOM's backup is gone.

I decided to create a container. <div id="mapSlot" class="container"> <div id="map" style="width: 500px; height: 300px"></div> </div> and gave them the style. #map { position: absolute; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; } .container { width: 800px; height: 600px; position: relative; } But I wouldn't take that decision, because, in addition, there's a mistake in debag fashion. "Uncaught Error: util.dom.element.html: attempt to redesign innerHTML from an element not added to the document, and if the normal regime is set, it is not possible to locate the markers, et. If div is added to the root document document.body.appendChild(this.$.map); Everything works well, but as soon as the yandex maps receive a reference to the ShadowDom site, problems begin.

Let's say there's a component and he's got a form inside:<dom-module ...> <style> </style> <template> <form id="someForm"> ... <button type=submit on-click="Submit"></button> </form> </template> </dom-module> <script> class ... get is{... } Submit(){ let form=this.$.someForm; // объект формы теперь в переменной form. Можете брать из него данные и отправлять запрос } </script> Option 2: If a separate component is made with a form:<form id="someForm"> <input value="{{Name}}"></input> <input email="{{Email}}"></input> ... </form> <script> class ... static get properties(){ return { Name:{ type: String value:"", }, Email:{ type: String, value:"", }, /*Еще свойства */ } Send(){ let data={ Name:this.Name, Email:this.Email ... } /отправка данных,например через XMLHttpRequest или fetch/ } connectedCallback(){ this.$.someForm.submit=this.Send; } </script>

In addition to localstorage, you may still use sessionstorage(d data removed at the end of the session) , and may use indexedDB if the volume of data is large.As an option, you can record data, for example:<some-element prop="property_value"> </some-element> And on the Web-componte some-element :Class SomeElement... Static get properties () { return { prop: { type:Object, value: {} } } } In fact, the way in which it is implemented depends on what you want to achieve.

I managed to solve, created a variable to save this, and used it to add the class. Follow belowready(){ super.ready(); var element = this setTimeout(function(){ element.$.load.classList.add('hidden'); }, 4000); }

I managed to solve, instead of creating computed properties I did a function_pricePlatform(preco) { if (preco == undefined) { preco = 0; } return (preco != 0) ? 'R$ ' + preco.toFixed(2).replace('.', ',') : 'Grátis' } and in the element I used something that Polymer's documentation calls "Computed binding" https://www.polymer-project.org/2.0/docs/devguide/data-binding#annotated-computed <box-plataforma logo="*imagem*" nome="Teste" descricao="Teste" url="{{item.platform.teste.url}}" preco="{{_pricePlatform(item.platform.teste.value)}}"></box-plataforma>

The main problem with your code is being trying to access the property href of a set of values. Function getElementsByTagName, as the name itself says, brings a list of elements by the name of the tag, but you tried to access the property href the ListNot the elements. In any case, there is a simpler way:Just use the method querySelectorAll setting the value of href that you are looking for:const boxes = document.querySelectorAll('.box'); for (let box of boxes) { const voidLinks = box.querySelectorAll('a[href="#"]'); if (voidLinks.length > 0) { console.log('Foi encontrado pelo menos um link vazio'); } else { console.log('Não há links vazios'); } }<div class="box"> <a href="#a">A</a> <a href="#s">B</a> <a href="#s">C</a> <a href="#s">D</a> <a href="#s">E</a> <a href="#s">F</a> </div> <div class="box"> <a href="#">A</a> <a href="#">B</a> <a href="#">C</a> <a href="#">D</a> <a href="#">E</a> <a href="#">F</a> </div>As you want to hide those who have all the empty links, just check if there is at least one non-empty link to make visible:const boxes = document.querySelectorAll('.box'); for (let box of boxes) { const links = box.querySelectorAll('a:not([href="#"])'); if (links.length == 0) { box.hidden = true; // Só tem link vazio, oculta a div } }<div class="box"> <a href="#a">A</a> <a href="#s">B</a> <a href="#s">C</a> <a href="#s">D</a> <a href="#s">E</a> <a href="#s">F</a> </div> <div class="box"> <a href="#">G</a> <a href="#">H</a> <a href="#">I</a> <a href="#">J</a> <a href="#">K</a> <a href="#">L</a> </div>

In your code:function isFree(){ var preco = document.getElementsByClassName('comprar'); for(n = 0; n < preco.length; n++){ var validaPreco = preco[n].innerHTML; if(validaPreco == '$ 0'){ validaPreco = 'Grátis' } } } You define the value of validaPreco as "Free", but this will not be reflected in the DOM, for validaPreco and preco[n].innerHTML are different objects, even if one is copy of the other. What you need to do is modify the object in the DOM:function isFree(){ var preco = document.getElementsByClassName('comprar'); for(n = 0; n < preco.length; n++){ var validaPreco = preco[n].innerHTML; if(validaPreco == '$ 0'){ preco[n].innerHTML = 'Grátis' } } } Here's an example:function isFree() { var preco = document.getElementsByClassName('comprar'); for (n = 0; n < preco.length; n++) { var validaPreco = preco[n].innerHTML; if (validaPreco == '$ 0') { preco[n].innerHTML = 'Grátis' } } } isFree();<ul> <li class="comprar">$ 10,00</li> <li class="comprar">$ 0</li> <li class="comprar">$ 99,99</li> <li class="comprar">$ 0</li> </ul>

First of all I noticed that you declared a component as reader but on time to call on another, you called as soma-reader, I don't know how this can work like that, leave everything with the same name.Well, but I believe your problem is that the observer is not working, that's why when the change part of a child component you need to use https://www.polymer-project.org/3.0/docs/devguide/observers#complex-observers , besides of course keeping the property with notify:true in your case do the following:static get properties() { return { mascara:{ type:Array, notify:true }, passar:{ type: Boolean, notify:true }, }; } static get observers() { return [ '_activeChanged(mascara.*)' ] } _activeChanged(){ console.log("passei aqui") } Like the property mascara is a array so that the observer works when it changes within the array, you need to place an asterisk with the property, such as: _activeChanged(mascara.*). But if you want it to work only if you change the entire property, do: _activeChanged(mascara)

You can hide the scroll when the mouse passes in a certain area, in my example I put to hide the overflow passing through <div id="azul">.var azul = document.getElementById("azul"); azul.onmouseover = function(){ document.body.style.overflowY = "hidden"; }; azul.onmouseout = function(){ document.body.style.overflowY = "auto"; };#total{ height: 900px; } #amarela{ background-color: yellow; height:50%; } #azul{ background-color: blue; height:50%; }<div id="total"> <div id="amarela"></div> <div id="azul"></div> </div>Source: https://stackoverflow.com/questions/7915882/disabling-mouse-scrolling

After much research on the subject, I found that there is a polyfill that was made by the Polymer team, which is independent of plataform.js and adds support to modern browsers to Custom Elements in a very complete way. https://github.com/Polymer/CustomElements I ran tests with this independent lib from Polymer with Opera 12 and succeeded in using the methods document.register and document.registerElement with all resources documented in the current W3C draft.Just to resell, this lib adds only the resources needed for Custom Elements. HTMLImport, Object.observer and other features used in Polymer will need to be loaded separately if you wish to use them.

The problem in the text editor was solved by adding CSS to the table edges.

I saw a solution with replace also and I found it bad exactly because of these conflicts it can give. I solved it using Gulp-hash so that he puts it hash in the file name and generates a json with the generated hash.Example of gulp:gulp.task('css-default', function() { return gulp.src([ './static/css/*.css' ]) .pipe(cssmin()) .pipe(concat('main.css')) .pipe(gulp.dest('./static/assets/css')) }); gulp.task('css-hash', function() { return gulp.src(['./static/assets/css/main.css']) .pipe(hash()) .pipe(gulp.dest('./static/assets/css')) .pipe(hash.manifest('assets.json', { deleteOld: true, sourceDir: './static/assets/css' })) .pipe(gulp.dest('.')); }); gulp.task('css', ['css-default'], function(){ gulp.start('css-hash'); }); The first gulp.task generates the file main.css unifying all my CSSs.The second generates the file with hash and one json that will have the hash information.The third ensures that each of them will be called in asynchronous sequence.Ai with json I get the file name to put on <head> of the site without having to replace.

Well, the two have different goals, and at some point they can even cross.The Polymer aims to encapsulate html, js and css using spec de http://www.w3.org/TR/html-imports/ , http://www.w3.org/TR/shadow-dom/ and http://www.w3.org/TR/components-intro/ Import of html file (html import)ex: Adding a html menu on a site without html import:<link rel="stylesheet" href="menu.css"> <script type="text/javascript" src="menu.js"></script> <div class="menu">...</div> ex: Adding the same menu with html import<link rel="import" href="menu.html"> In fact it is quite simple,importing the html file we can create a page (as in ex. the menu.html ) and make it import the html, css and js of Manu. With this, just import the page to use the component (html element) and it matters the other files. ShadowThe shadow DOM creates a new context for the component by separating it from the context of the page, so you don't have to worry for example collisions of id or css out of context.So at the time of creating an 'item' ID element, don't worry about the possibility of having another element with that same ID inside the page where the component will be rendered.HTML component (web component)The summarized html component is a way to encapsulate component creation through html tags.Instead of having to create html and then run javascript:<div id="menu"></div> $("#menu").criaMenu({}); Just register the component and then call the tag.<meuMenu /> The React in turn, you do not have the slightest concern (at least for now) of organizing your files by importing html or creating web components. The goal of react is to create html/javascript components and render it performally in the browser using the virtual DOM.The Virtual DOM is a diff mechanism, which makes all html manipulation happen in memory before being rendered in DOM, making it possible to check what has already been created and change only what has been changed.