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.
