[英]Why I cannot set sizes on a element that is a WebComponent
I am trying to set width
and height
in a WebComponent using the :host
selector, but the sizes do not change. 我试图使用
:host
选择器在WebComponent中设置width
和height
,但大小不会改变。 Here is the template for the component: 以下是组件的模板:
<template>
<style>
:host {
width: 100px;
height: 100px;
background-color: rebeccapurple;
}
</style>
<h1>Content</h1>
</template>
What I need to do is adding a div
as a container and set the size of it 我需要做的是添加一个
div
作为容器并设置它的大小
<template>
<style>
div {
width: 100px;
height: 100px;
background-color: rebeccapurple;
}
</style>
<div>
<h1>Content</h1>
</div>
</template>
I wanted to understand why this is not possible and the reason for it. 我想明白为什么这是不可能的,以及它的原因。 Or if there are better way to resolve that.
或者,如果有更好的方法来解决这个问题。
Here is a JSBin of it: http://jsbin.com/gesovagapi/edit?html,css,js,output 这是它的一个JSBin: http ://jsbin.com/gesovagapi/edit?html,css,js, output
By default custom components are created with display: inline;
默认情况下,使用
display: inline;
创建自定义组件display: inline;
. 。 If you want your component to take a specified width/height, set its
display
property to block
or inline-block
. 如果希望组件采用指定的宽度/高度,请将其
display
属性设置为block
或inline-block
。 For example: 例如:
<style>
:host {
display: inline-block;
width: 100px;
height: 100px;
background-color: rebeccapurple;
}
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.