Why does Vue render a component outside of its parent block?

Question

HTML

The component is called in the table, and it is inserted before the table. Why is this happening?

Blade file where the product-item component is called

@extends('backend.app')

@section('page_title', 'Products list')

@section('btn-create')
    <a class="btn btn-outline-primary" href="{{route('products.create')}}">Create</a>
@endsection

@section('content')
    <div class="card" id="app">
        <div class="card-header">
            Header
        </div>
        <table class="table mb-0">
            <thead>
                <tr>
                    <th></th>
                    <th>ID</th>
                    <th>Image</th>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($products as $product)
                    @php
                        $links = [
                            'edit' => route('products.edit', $product->id),
                            'destroy' => route('products.destroy', $product->id)
                        ];
                    @endphp

                    <product-item
                        v-bind:product='@json($product)'
                        v-bind:links='@json($links)'
                    ></product-item>
                @empty
                    <tr>
                        <td colspan="6">Products not found</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection

Component code

<template>
    <tr>
        <td>
            <div class="form-group form-check">
                <input class="form-check-input" type="checkbox" name="" id="">
            </div>
        </td>
        <td>{{ product.id }}</td>
        <td><img src="https://via.placeholder.com/50?text=" alt=""></td>
        <td>
            <a v-bind:href="links.edit">{{ product.name }}</a>
        </td>
        <td><span class="o-currency"></span>325.00</td>
        <td>
            <div class="b-actions">
                <a href="" class="b-actions__link">
                    <span class="o-icon o-icon--active">
                        <i data-feather="eye"></i>
                    </span>
                </a>
                <a v-bind:href="links.destroy" class="b-actions__link">
                    <span class="o-icon">
                        <i data-feather="trash"></i>
                    </span>
                </a>
            </div>
        </td>
    </tr>
</template>

<script>
    export default {
        name: 'product-item',
        props: ['product','links'],
    }
</script>

Answer 1

DOM template parsing features :

Some HTML elements such as , , and have restrictions on what elements can appear inside them, or elements such as , and can only appear inside certain other elements. This will lead to problems when using components with elements that have such restrictions. For example:<ul><ol><table><select><li><tr><option>

<table>
  <blog-post-row></blog-post-row>
</table>

The custom component will be raised higher as it is considered invalid content, causing errors in the final rendering. Fortunately, a special attribute provides a solution to this problem:<blog-post-row>is

<table>
  <tr is="blog-post-row"></tr>
</table>