Default settings of unrecognized HTML elements

Question

If I use custom or unsupported elements in my HTML they can still be styled and the browser will render them.

For instance, the HTML5 main element is no

Answer 1

It's not so much unrecognized elements, as all elements. Remember that CSS supports XML as well as HTML. In XML, all elements are unrecognized

In the CSS 2.1 spec, section 6.1.1 says:

6.1.1 Specified values

User agents must first assign a specified value to each property based on the following mechanisms (in order of precedence):

1. If the cascade results in a value, use it. Except that, if the value is 'inherit', the specified value is defined in “The 'inherit' value” below.

2. Otherwise, if the property is inherited and the element is not the root of the document tree, use the computed value of the parent element.

3. Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition.

By definition, unrecognized elements won't be mentioned in the user agent style sheet, and since we're talking about the default behaviour, won't be mentioned in the author style sheet either. So 1 does not apply.

The display property is defined in 9.2.4 The 'display' property. In the rules there, it says Inherited: no, so 2 does not apply.

So 3 applies. Again from the rules at 9.2.4, we have Initial: inline, so the elements are inline.

For HTML block level elements, they are block by default simply because they are listed as such in the user-agent's style sheet. Similarly for other display values such as table, list-item etc.