CODEWITHSUNDEEP
csspolymerpolymer-1.0shady-dom
dman
dman

Reputation: 11064

Why doesn't width: 100% apply to local dom hosting element?

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>

Upvotes: 2

Views: 1771

Answers (1)

Justin XL
Justin XL

Reputation: 39006

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.

Upvotes: 4

Related Questions