Question

我正在尝试使用width选择器在WebComponent中设置height和:host，但尺寸不会更改。以下是组件的模板：

<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属性设置为block或inline-block。例如：

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

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

1 个答案: