Question

您好我们最近开始在Aurelia制作自定义元素。我们建立的规则之一是我们不能在使用它们时将类名放在自定义元素上。

这给我带来了问题，因为自定义元素本身没有任何属性，所以它打破了很多样式。

特别是当它放在一个弹性容器中时会中断。

我已经在developers.google.com上看到你可以使用:host选择器设置自定义元素的样式，但我找不到Aurelia的任何提及，我正在努力让它工作

我有一个codepen来演示问题here。

Answer 1

您可以为f.i设置自定义元素的样式。通过引用元素本身，如下所示：

o-custom-element {
    color: white;
    background: green;
    flex-grow: 1;
}

我已经将您的codepen分叉以显示更改：http://codepen.io/anon/pen/ZeEdLL

Answer 2

将自定义元素放在弹性项div中：

<div class="half-container">
  <p>Breaking because of custom element (Flex container is yellow)</p>
  <div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item green">    
      <o-custom-element></o-custom-element>
    </div>
  </div>
</div>

如果您想使用:host，则必须将其放入自定义元素的Shadow DOM内的<style>元素中：http://codepen.io/anon/pen/LWYwxK

问题是您必须复制规则，并且比向自定义元素添加类更糟糕...

Aurelia Custom Element在Flex-Container

2 个答案: