компонент таблицы в трафарете js - PullRequest
Новая
       86

компонент таблицы в трафарете js

1 голос
/ 25 марта 2020

Я пытаюсь создать пользовательский компонент для элемента таблицы, используя трафарет js. Но когда я создаю компонент, вывод не соответствует ожиданиям. 

import { Component, h,  } from "@stencil/core";

@Component({
  tag: "table-head",

})
export class table{
  render() {
    return (
        <table class="table">
            <thead>
                <tr>
                        <slot/>
                </tr>
            </thead>
        </table>
    );
  }
}

Я использую вышеуказанный компонент в html файл следующим образом. 

<table-head>
      <th>Frist</th>
      <th>second</th>
 </table-head>

теперь, когда я, когда проверить файл html. <th> элемент не отображается.

Я вижу что-то подобное, когда проверяю пользовательский компонент. <th> не переносит содержимое. 

        <thead>
            <tr> Frist
                 second </tr>
        </thead>

что мне здесь не хватает?

1 Ответ

1 голос
/ 26 марта 2020

Когда Браузер первоначально проверяет dom, он проверяет наличие недействительных тегов. Он удаляет теги <th>, потому что они не находятся внутри действительного <table> в исходной семье.

Это здесь: 

<table-head>
  <th>Frist</th>
  <th>second</th>
</table-head>

- недопустимый dom для таблицы, поэтому теги <th> удалены. Когда веб-компонент отображает <table> во время выполнения и dom будет действительным, теги <th> уже удалены. Я не думаю, что вы можете много с этим поделать, так как вы не можете контролировать, как браузер проверяет дом.

Вы можете попробовать использовать display: table в качестве обходного пути.

...