diff --git a/debug/src/debug.js b/debug/src/debug.js
index d0190594d4..e06c430151 100644
--- a/debug/src/debug.js
+++ b/debug/src/debug.js
@@ -341,7 +341,14 @@ export function initDebug() {
// with false positives, which we'd like to avoid.
let domParentName = getClosestDomNodeParentName(parent);
if (domParentName !== '') {
- if (type === 'table' && isTableElement(domParentName)) {
+ if (
+ type === 'table' &&
+ // Tables can be nested inside each other if it's inside a cell.
+ // See https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#nesting_tables
+ domParentName !== 'td' &&
+ isTableElement(domParentName)
+ ) {
+ console.log(domParentName, parent._dom);
console.error(
'Improper nesting of table. Your
should not have a table-node parent.' +
serializeVNode(vnode) +
diff --git a/debug/test/browser/debug.test.js b/debug/test/browser/debug.test.js
index b7eb6d29a4..54be87578a 100644
--- a/debug/test/browser/debug.test.js
+++ b/debug/test/browser/debug.test.js
@@ -550,6 +550,33 @@ describe('debug', () => {
render(, scratch);
expect(console.error).to.be.calledOnce;
});
+
+ it('accepts valid nested tables', () => {
+ const Table = () => (
+
+
+ foo |
+
+
+
+
+
+ cell1 |
+ cell2 |
+ cell3 |
+
+
+ |
+
+
+ bar |
+
+
+ );
+
+ render(, scratch);
+ expect(console.error).to.not.be.called;
+ });
});
describe('paragraph nesting', () => {