为什么我无法在作为WebComponent的元素上设置大小

Question

我试图使用:host选择器在WebComponent中设置width和height ，但大小不会改变。 以下是组件的模板：

<template>
  <style>
    :host {
      width: 100px;
      height: 100px;
      background-color: rebeccapurple;
    }
  </style>

  <h1>Content</h1>
</template>

我需要做的是添加一个div作为容器并设置它的大小

<template>
  <style>
    div {
       width: 100px;
       height: 100px;
       background-color: rebeccapurple;
    }
  </style>

  <div>
    <h1>Content</h1>
  </div>
</template>

我想明白为什么这是不可能的，以及它的原因。 或者，如果有更好的方法来解决这个问题。

这是它的一个JSBin： http ：//jsbin.com/gesovagapi/edit？html，css，js， output

Answer 1

默认情况下，使用display: inline;创建自定义组件display: inline; 。 如果希望组件采用指定的宽度/高度，请将其display属性设置为block或inline-block 。 例如：

  <style>
    :host {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: rebeccapurple;
    }
  </style>