Allow <slot> as a child of <table> or any of it descendants

[GeorgeTailor]

Currently HTML <table> supports only basic elements like <thead>, <tbody> and so on along with https://www.w3.org/TR/html52/dom.html#script-supporting-elements-2, which include <script> and <template>.

This is inconvenient since it prevents from using what HTML already has to offer in terms of accessibility and standard tags.

The use case for this would be applying additional styling to each row, as well as nested elements and adding some enhancement with JavaScript.

Not being able to use <slot> in a table forces users to create abominations from <div>'s with a lot of aria-* attributes which, IMO, is unnecessary.
Since slot projects content, the projected content can be evaluated whether or not it should be rendered, for example:

• User defines <tr slot="row"> as a child of <tbody> - it renders;
• User defines <option value="invalid">1</option> as a child of <tbody> - it does not render.

Full example:

<script>
	class Table extends HTMLElement {
		constructor() {
			super();
			this.attachShadow({ mode: 'open' }).innerHTML = `
				<table>
					<thead>
						<slot name="header"></slot>
					</thead>
					<tbody>
						<slot name="row"></slot>
					</tbody>
				</table>
			`;
		}
	}
	window.customElements.define('data-table', Table);
</script>
<data-table>
	<tr slot="header">
		<th>header1</th>
	</tr>
	<tr slot="row">
		<td>cell1</td>
	</tr>
	<!-- this should not render -->
	<nav slot="row">
		<td>cell1</td>
	</nav>
</data-table>

</body>

</html>

[Yay295]

Could you provide an example of what it looks like currently as a comparison?

[GeorgeTailor]

https://github.com/zooplus/zoo-web-components/blob/master/zoo-modules/grid-modules/grid-module/grid.html

unfortunately, without proper aria-* attributes at the moment.

[annevk]

This is being discussed in WICG/webcomponents#630 but it's largely a dead end as it requires changes to the HTML parser. I think we best keep the discussion there so I'll close this.