Iron flex guide does not show code

[hugelgupf]

I'm assuming that those grey boxes are not supposed to be empty:

Using up-to-date Chrome on OS X.

[jeffposnick]

FWIW, I was seeing this as well with Chrome 46 a few days ago, but I can't reproduce it now on the production site.

Running a dev version of the site, you can reproduce it by removing the <prism-highlighter> from the page. If you can reproduce this now, @hugelgupf, do you see any errors in the Chrome DevTools console?

[hugelgupf]

So first of all, I just opened it up again, and I cannot reproduce. Luckily, I still have the old tab open. The only thing in the console is this:

/deep/ combinator is deprecated. See https://www.chromestatus.com/features/6750456638341120 for more details. elements.build.js:40898

Is there something that processes the stuff in code tags to produce the highlighting that could be failing during the build process? I've attached two screenshots comparing the broken/working state of a specific code tag, and it looks like on the broken one, the code that's supposed to be displayed is actually "executed". (Not sure I have the right word for this -- rendered?)

[jeffposnick]

This portion of the <page-guide> source looks fishy to me:

var event = this.fire('syntax-highlight', {code: code});
if (event.detail.code && !els[i].highlighted) {
  els[i].highlighted = true;
  els[i].innerHTML = event.detail.code;
}

AFAIK, this.fire() doesn't do anything synchronous. It will raise an event, which is handled asynchronously by any event listeners. Unless I'm misreading things, that code will only work as expected if the syntax-highlight event handler has already run by the time the if() statement is encountered, so there's a race condition.

[arthurevans]

Yep, rendered is right. If you still have the bad tab open, can you try running this in the console?

var h = document.querySelector('prism-highlighter');
h.__isPolymerInstance__

If it returns true, it looks like the Prism highlighter element exists on the page and is upgraded, but didn't highlight (perhaps because of a timing issue). If it throws an error, the element is missing or hasn't been upgraded.

fire is synchronous and returns the custom event fired, so you can do things like:

var event = this.fire('event-name');
if (event && !event.defaultPrevented) { ... } 

Or words to that effect. See:

https://github.com/Polymer/polymer/blob/master/src/standard/utils.html#L212

But it occurs to me that if contentChanged is called before the prism-element's attached method, we'd see this issue, because it would never receive the event. I'm not sure whether that code path is possible, but it's worth investigating...

https://github.com/PolymerElements/prism-element/blob/master/prism-highlighter.html#L44

[hugelgupf]

Console output:

> var h = document.querySelector('prism-highlighter');
undefined
> h.__isPolymerInstance__
true

(Sorry I can't be of more help, hadn't done web dev in ages before starting with polymer.)

[jeffposnick]

Huh, I wouldn't have thought the underlying dispatchEvent() was synchronous, but yep, you're right @arthurevans. Sorry for the red herring!

[arthurevans]

No, that's plenty to go on. I believe it must be a timing issue.

@jeffposnick I know, right? Need to open a bug to make that clear in the docs.

[arthurevans]

@frankiefu @blasten Weird intermittent catalog bug -- could this be a timing issue?

[arthurevans]

This issue was moved to googlearchive/polymer-element-catalog#207