为什么转换没有注册为 html 中的元素？

Question

<template>
<header>
<nav class="container">
    <div class="branding">
        <router-link class="header" :to="{name : 'Home'}">>FireBlogs</router-link>
    </div>
    <div class="nav-links">
        <ul>
            <router-link class="link" to="#">Home</router-link>
            <router-link class="link" to="#">Blogs</router-link>
            <router-link class="link" to="#">Create Post</router-link>
            <router-link class="link" to="#">Login/Register</router-link>
        </ul>
    </div>
</nav>
<menuIcon class="menu-icon" />
    <transition name="mobile-nav" id="mobile-nav">
        <ul>
            <router-link class="link" to="#">Home</router-link>
            <router-link class="link" to="#">Blogs</router-link>
            <router-link class="link" to="#">Create Post</router-link>
            <router-link class="link" to="#">Login/Register</router-link>
        </ul>
    </transition>
</header>
</template>

In this vueJS code I have some elements inside the transition tag, but when I inspect the web page I can only see this: Console Image here I wish to style the transition tag as a whole using CSS. Can somebody help me figure this out?

Answer 1

Adding an answer since this is getting some upvotes:

transition elements do not create a DOM element, they define transitions/changes of states to elements within the tag.

To create a DOM element that can be targeted with CSS, you can use TransitionGroup and then use the tag property to render a wrapping element:

<TransitionGroup tag="div">{stuff here}</TransitionGroup>

If you don't want to create another element, but keep the transition element, you can use the parent element to style.

header > ul { styles here }