Polymer customelements's content get inserted below the element?

Question

I have a bunch of custom elements in the Polymer project (probably too many, but that's something I'm working one.)

My problem is, the content of these <gb-course>'s seems to be being inserted below the <gb-course> itself, and I cannot figure out why.

(If you notice those little black bars above the first bold word in the center column, that's supposed to be a 1px border-bottom on the <gb-course> itself. Which it is, according to Chrome/Firefox/Safari, but why is the content being stuck under the element?)

Answer 1

My guess is that you need to put a style tag in the gb-course that sets :host {display: block;}. Custom elements are display: inline by default.