自定义元素的 CSS 属性未继承给子元素答案

【问题标题】：CSS properties of custom element not inherited to children自定义元素的 CSS 属性未继承给子元素
【发布时间】：2018-03-16 13:39:48
【问题描述】：

我正在处理一个 Angular 5 项目，并注意到一些 CSS 属性没有从自定义元素正确继承。例如，考虑一个自定义组件foo：

@Component({
  selector: 'foo',
  template: `
    <form>inside form</form>
    <div>inside form</div>
    outside
  `,
})
export class FooComponent { }

现在，我想更改它的opacity 和max-height：

foo {
  opacity: 0.5;
  max-height: 0;
  overflow: hidden;
}

但是，浏览器似乎没有将这些属性正确地继承到 form 和 div 元素。

Firefox (59) 正确继承了opacity，但似乎忽略了max-height。
Chrome (64) 不继承opacity，也完全忽略max-height。

我发了一个plunk demonstrating the issue。

自定义元素如何继承 CSS 属性是否存在一些扭曲，或者这些只是浏览器错误？

【问题讨论】：

不透明而不是继承！它适用于元素及其所有内容...与 max-height 相同... cutom 元素的问题，请尝试div

标签： html css angular custom-element

【解决方案1】：

opacity 和 max-height 都不是继承的属性。我认为这仅仅是因为您的自定义 foo 组件默认情况下是内联的，因此甚至不允许应用 max-height 。

添加

foo { display: block; }

或

foo { display: inline-block; }

并检查你得到什么结果......

【讨论】：

我还会添加一条评论，说明不需要使用自定义元素。只需使用 div 即可避免此类问题和任何错误
@TemaniAfif 在像 Angular 这样的框架中，可能有一个自定义组件的原因，我们真的不知道预期的最终结果是什么。我只是假设它可能比简化的示例更复杂。
啊，是啊，内联渲染肯定是max-height的问题。但是，这并不能解释为什么不透明度不适用于儿童。我知道，inherit 是错误的术语，但即使是内联元素的子元素也应该出现与父元素的不透明度，这不是这里的情况。但另一方面，我们正在处理内联元素中的块，因此它是无效的 HTML，因此是未定义的行为。
我不太确定这是否真的无效，我不知道经典的块/内联划分是否适用于自定义组件，加上HTML5对块/内联不再那么严格，而是指定“内容类别”，w3.org/TR/html5/dom.html#kinds-of-content // 你是对的，它没有解释不透明行为，这让我对你的初始示例的显示方式感到困惑——但也许那是一个浏览器错误。

【解决方案2】：

尝试分别添加标签以在必要的标签中应用 css。乙：

    foo.opacity-test form {
       opacity: 0.5;
    }

【讨论】：