For the record, there is a working version for reference here: http://jsbin.com/ixIpIMa/3/edit
On Wed, Jan 22, 2014 at 6:26 PM, Sergey Shevchenko <[email protected]>wrote: > You have the `noscript` attribute on your `<dvh-menu-button>` yet your > element has a scripting part to it, which you're including from outside the > element's definition. This is not how things are normally done in Polymer. > Could you move the `<script>` tag inside the element, remove the `noscript` > attribute, and retry? > > I'll leave the rest to others to comment on. > > On Wednesday, January 22, 2014 4:19:28 PM UTC-8, Hoa V. Dinh wrote: >> >> Hi all, >> >> *1. Behavior issue* >> >> I tried to implement a button showing a menu in a very simple way and in >> a polymerized version. >> >> https://github.com/dinhviethoa/polymer-dvh-ui >> >> in non-polymer/ folder, open index.html (I opened it using a local web >> server), a square “Menu", should show: >> >> When you click on the square, a menu will show and a dark background will >> also show. >> >> >> When you click on the dark background, the menu and the dark background >> will disappear. >> >> I tried to implement the same using polymer. >> >> https://github.com/dinhviethoa/polymer-dvh-ui/ >> blob/master/polymer/dvh-menu-button/dvh-menu-button.html >> >> The polymer version is in polymer/ folder. >> Run the following: >> $ bower install >> >> Then open index.html through a local web server. >> When you click on on the button “Menu”, the menu only will show. The dark >> background will not show despite I’m doing the exact same thing. >> >> >> Moreover, when I toggle the Web Inspector, the dark background will >> suddenly appear. >> >> Can someone help me understand how to get it to work? >> Is it an issue in Chrome? >> >> *2. Debugging* >> >> *2.1. inspecting DOM* >> >> It feels to me that it was generally more difficult to debug a >> combinaison of Polymer elements that I wrote compared to just styling my >> items in the DOM. >> >> Here’s what the DOM of the non-polymer version shown: >> >> >> >> The DOM of the polymer version, when I enabled shadow DOM in devtools, I >> had the following: >> >> >> There’s much more information and makes it difficult to find the items >> you want to inspect. >> I think linearizing polymer elements should help: merging #shadow-root >> and the content of the node. >> It will prevent me to try to dig in these two hierarchy independently. >> >> *2.2. inspecting CSS style* >> >> It’s also more difficult to know which CSS stylesheet is responsible for >> the given look of your element. >> >> For example, when I’m focusing on dvh-menu-item in DevTools: >> >> >> I know that the "font-size: 10px” CSS property value applied because of >> "::content dvh-menu-item user agent stylesheet” but it’s misleading because >> it’s not because the "user agent stylesheet” and there’s no indication of >> which CSS file (or HTML file) is responsible for this value. >> >> Of course, we have here a very simple example. Sometimes, the hierarchy >> can be even more tricky to inspect. >> Is there some experienced polymer user/developer who has some >> recommendation about how to workaround those debugging issues? >> >> I’m running on Google Chrome 34.0.1788.0 (Official Build 245082) dev. >> >> Thanks. >> >> -- >> Hoa V. Dinh >> >> Follow Polymer on Google+: plus.google.com/107187849809354688692 > --- > You received this message because you are subscribed to the Google Groups > "Polymer" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/c49765de-c9e4-4592-8fe4-29fd7cfe5980%40googlegroups.com > . > > For more options, visit https://groups.google.com/groups/opt_out. > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAHbmOLYJH_ofpgGUODYvLJrKVKng1SpDAe0sV4--7%3Dr7cEs%3DSw%40mail.gmail.com. For more options, visit https://groups.google.com/groups/opt_out.
