flexbox - Aurelia 自定义元素在 Flex-Container 内不起作用

标签 flexbox aurelia web-component shadow-dom custom-element

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

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

特别是当放入弹性容器内时它会破裂。

我已阅读 developers.google.com您可以使用 :host 选择器设置自定义元素的样式,但我找不到 Aurelia 的任何提及,并且我正在努力让它工作。

我有一个codepen来演示这个问题here .

最佳答案

您可以设置自定义元素的样式通过引用元素本身,如下所示:

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

我已经 fork 了你的 codepen 以显示更改:http://codepen.io/anon/pen/ZeEdLL

关于flexbox - Aurelia 自定义元素在 Flex-Container 内不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42438273/

相关文章:

reactjs - 将网格置于 View 内的中心

javascript - 在没有中间 DOM 节点的 Aurelia 中渲染组件

aurelia - 在 Aurelia 中加载组件模板后,是否有一种优雅的方式来运行一些代码?

css - 深度选择器的自定义样式混合

javascript - polymer 中的私有(private)非静态变量?

html - 如何对齐显示元素?

javascript - 使用 flex box,使用父节点的 clientWidth 和 Height 设置 Canvas 的宽度和高度隐藏粘性页脚

html - 对齐 self : flex-end not moving item to bottom

javascript - Aurelia 中的 Property and Collection 观察者未引发 propertyChanged 事件

javascript - 将变量传递给自定义 Svelte Web 组件