My code includes custom elements that exhibit strange behavior when a child element has the "display: inline-block" style.
Let's examine these two div elements:
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow">
<div style="display: block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow">
<div style="display: inline-block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>In the first main div, it seems like the browser is ignoring the custom element randomcustomelement. While it has the correct width and height, it isn't rendered as expected. In the second main div, however, the randomcustomelement is rendered but with an unexpected height of 17px. A screenshot from Chrome's element inspector showing this issue is linked below:
https://i.sstatic.net/AITV4.png
The key difference between both examples is the display property of the child div inside randomcustomelement: it's set to "block" in the first example and "inline-block" in the second. I've styled the randomcustomelement with a distinct yellow color to highlight when it's being rendered.
This problem persists across different browsers, despite what they should do according to HTML specifications:
User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them.
https://www.w3.org/TR/html5/infrastructure.html#extensibility-0
This issue is causing me frustration because I require the inner div to have a "display: inline-block" property. Ideally, I would like the code in the second example to produce results similar to the first example.