Custom Element について、CSS の background が効く理由

Question

知りたいこと

Custom Element をいじっていたところ妙な挙動に気付きましたので理由を知りたいです。

下記➂にございますように、なぜか background の反映のためには、display 指定 および ラップ要素が必要になるのです。

	要素名	display 指定	ラップ要素	background の反映
➀	<custom-area1>	❌なし	❌なし	👎効かない
➁	<custom-area2>	✅あり	❌なし	👎効かない
➂	<custom-area3>	✅あり	✅あり	🎉効く

該当のソースコード

https://jsfiddle.net/0fjzhb59/

<custom-area1>
	<p>custom-area1</p>
	<style>
		wrapper-area {
			background: aquamarine;
		}
	</style>
</custom-area1>

<custom-area2>
	<p>custom-area2</p>
	<style>
		wrapper-area {
			background: aquamarine;
			display: block;
		}
	</style>
</custom-area2>

<div>
	<custom-area3>
		<p>custom-area3</p>
		<style>
			custom-area3 {
				background: aquamarine;
				display: block;
			}
		</style>
	</custom-area3>
</div>

一体どういう経緯や理由によって、➀➁は効かず、➂でのみ効くのでしょうか？

Comments

[kei344]

「wrapper-area」がコード中にありませんが、style指定を間違えていませんか？
https://jsfiddle.net/r61swz2v/

[munekun]

ご指摘ありがとうございます。仰る通りでした。
コードのご修正もありがとうございます。

Answer 1

未知のタグ名はデフォルトで display: inline です。で、display: inline の要素の中にブロック要素を差し込むと例外的な描画方法になります。親のインライン要素は子のブロック要素によって2つに分割され、ブロック要素の上下に描画されます。子のブロック要素の部分には親の背景は描画されません。質問のケースでは子のブロック要素の前後に何もないため、背景はどこにも描画されません。

<custom-area3>
before<p>custom-area3</p>after
<style>
custom-area3 {
	background: aquamarine;
}
</style>

のようにブロック要素の前後に何かを入れると何が起きているかわかりやすいかもしれません。

Answer 2

そもそも１、２は「wrapper-area」という存在しないHTML要素を指定しているのでCSSは効きません。
なお

<custom-area1>
	<p>custom-area1</p>
	<style>
		custom-area1 {
			background: aquamarine;
		}
	</style>
</custom-area1>

としてもcustom-area1はinline要素なので背景色は反映されません

Comments

[munekun]

ありがとうございます。
なるほど、Custom Element はインライン要素なのですね。
また、そもそもinline要素には背景色が効かないというのことも知りませんでした。