adamdport adamdport - 4 months ago 9
HTML Question

last-of-type doesn't work with custom elements in IE11 and Edge



.foo bar:last-of-type {
background-color: red;
}

<div class="foo">
<bar>bar</bar>
<bar>bar</bar>
<bar>bar</bar>
<span>span</span>
</div>

<div class="foo">
<bar>bar</bar>
<bar>bar</bar>
<bar>bar</bar>
<baz>baz</baz>
</div>





The last
bar
appears red in both cases in Chrome and Firefox. In IE11 and Edge, however, it doesn't work in the second scenario. What's going on?

Answer

IE appears to be treating all unknown elements as being the same element type. If you remove the bar type selector, you'll see that IE matches the baz element (and only that):

.foo :last-of-type {
  background-color: red;
}
<div class="foo">
  <bar>bar</bar>
  <bar>bar</bar>
  <bar>bar</bar>
  <span>span</span>
</div>

<div class="foo">
  <bar>bar</bar>
  <bar>bar</bar>
  <bar>bar</bar>
  <baz>baz</baz>
</div>

This behavior has also been seen in Microsoft Edge.

Has this been acknowledged as a bug by Microsoft? Well I haven't found any bug reports to this effect. Is this a spec violation? That depends on whether you consider unknown elements to be of the same element type (note that I'm speaking in terms of the DOM, not HTML). Neither the Selectors nor DOM specs make even so much as a mention of unknown elements (presumably because unknown elements are non-conforming in the first place).

Note that I keep saying "unknown element" because you don't actually have a custom element until you register it (thereby making it a known element like all other standard elements). Furthermore, IE does not support custom elements as defined by any of the upcoming standards, and Microsoft Edge hasn't shipped the feature yet. Custom elements are fine, as long as you're working with browsers that either support the feature or polyfills thereof. Unknown elements, as with any other intentional deviation from the standard, are unequivocally bad practice and can result in unexpected behavior.

Comments