为什么我不能在作为 WebComponent 的元素上设置大小答案

【问题标题】：Why I cannot set sizes on a element that is a WebComponent为什么我不能在作为 WebComponent 的元素上设置大小
【发布时间】：2018-01-18 22:50:36
【问题描述】：

我正在尝试使用 :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

【问题讨论】：

标签： html css web-component native-web-component

【解决方案1】：

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

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

【讨论】：

很好的解释......这就是问题所在。谢谢！