javascript - What happens if you just define a new tag on a page? (no webcomponents) -

i thinking experimenting custom stylesheet. 1 big issue i've seen long time simple fact have h1 , p tags typography.

it make lot more sense (me to) have descriptive tags such <hero>, <copy>, <micro>, <mini> etc can used instead of doing weird things <h1 class='hero'>.

what happens evergreen browsers & ie 10+ if define new tag? work in general @ least in chrome define new tag , assign css properties it. however, there limitations on how use javascript on tag defined this? there big downsides?

i not considering defining webcomponent <hero> since need register component whenever gets attached i'm sure heavy on performance simple heading hero tag. last time remembered html5shiv did ie8 or ie9. when wouldn't know tag convert tag block level element think standard properties. happening in evergreen browsers of now, meaning long don't need special events, methods , properties defined on tag ok write tags such <hero>?

the browser stick unrecognised element in dom default styling on assumption new feature (and in hope there css/js shim add backwards compatibility) rather falling on because it's been given invalid html.

(then, in future, element of name does added spec, , page breaks).

don't write invalid html.