2

In this custom element, the width: 90% will not apply when used in :host, but the width: 90% will apply if I apply it to section. Why is this? Isn't portfolio-display a shady dom element in which the width: 90% should apply as it's the hosting element instead of section? 

<dom-module id="portfolio-display">
  <style>
    :host {
      height: 60%;
      transition: box-shadow 0.2s ease-out;
     }

     section {
       width: 90%;
       background-color: #5a7785;
     }


    .big {
      height: 100px;
      width: 100px;
    } 
  </style>

  <template>
    <section>
      <div onclick="page('/portfolio')"
        class="vertical layout">
        <div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
dman
  • 10,406
  • 18
  • 102
  • 201
  • It could be the use of the layouts on the :host that prevent the width from being applied. It could also be how it's used. More information may be necessary. – Brandon Aug 26 '15 at 01:50
  • Naw, the it was the same without the layout attributes. – dman Aug 26 '15 at 01:56
  • Could you provide implementation example of the component where it fails? – Brandon Aug 26 '15 at 02:09

1 Answers1

4

I think you are missing display: block; on your :host.

section works 'cause most browsers display section elements with

section { 
    display: block;
}

See this plunker for an example.

Justin XL
  • 38,763
  • 7
  • 88
  • 133
  • It's the same with `background-color: #5a7785;` also, though. In addition, the behavior exists if I use layout attributes, which would make display `flex` I believe. – dman Aug 26 '15 at 12:22
  • 1
    Hmm, not sure exactly what you mean, did you see the plunker I linked? Show some more code and I will have a look. – Justin XL Aug 26 '15 at 12:24
  • I've learned the Plunkers are rarely useful because of discrepancies between versions of Polymer elements. For instance, on your Plunkr I can set the `background-color: red` in `:host`. This is not the same behavior on my local Polymer, which `background-color` has no effect on the `:host` for this custom element. – dman Aug 26 '15 at 14:10
  • 2
    I can guarantee you it's got nothing to do with dependencies. Most likely, assuming display: block already applied, you don't see the colour because the the height/width of the element's parent is not defined. – Justin XL Aug 26 '15 at 21:31