From 1be8240c43f51fbb926543b705545f84978ecbef Mon Sep 17 00:00:00 2001 From: John Messerly Date: Thu, 28 May 2015 15:50:01 -0700 Subject: [PATCH] fixes #316, attribute dependencies were not always recorded on the correct ShadowRenderer --- src/ShadowDOM/ShadowRenderer.js | 7 ++++-- tests/ShadowDOM/js/test.js | 42 +++++++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+), 2 deletions(-) diff --git a/src/ShadowDOM/ShadowRenderer.js b/src/ShadowDOM/ShadowRenderer.js index cd3d22e..8dfbf7e 100644 --- a/src/ShadowDOM/ShadowRenderer.js +++ b/src/ShadowDOM/ShadowRenderer.js @@ -340,9 +340,10 @@ var shadowTrees = getShadowTrees(shadowHost); // 1.2 + var renderer = getRendererForHost(shadowHost); for (var i = 0; i < shadowTrees.length; i++) { // 1.2.1 - this.poolDistribution(shadowTrees[i], pool); + renderer.poolDistribution(shadowTrees[i], pool); } // 1.3 @@ -418,8 +419,10 @@ return; } + // Make sure to use the correct renderer. for (var child = node.firstChild; child; child = child.nextSibling) { - this.poolDistribution(child, pool); + var renderer = isShadowHost(child) ? getRendererForHost(child) : this; + renderer.poolDistribution(child, pool); } }, diff --git a/tests/ShadowDOM/js/test.js b/tests/ShadowDOM/js/test.js index c1cc475..035af15 100644 --- a/tests/ShadowDOM/js/test.js +++ b/tests/ShadowDOM/js/test.js @@ -17,6 +17,10 @@ suite('Shadow DOM', function() { el.offsetWidth; return unwrap(el).innerHTML; } + function getVisualText(el) { + el.offsetWidth; + return unwrap(el).textContent; + } function normalizeInnerHtml(s) { // IE9 - Even though the attribute name is stored as "checked" innerHTML @@ -520,4 +524,42 @@ suite('Shadow DOM', function() { }); + // https://github.com/webcomponents/webcomponentsjs/issues/316 + test('nested renderer should invalidate attributes', function() { + // Trailing whitespace in this HTML is to match the original repro, and to + // work around: https://github.com/webcomponents/webcomponentsjs/issues/337 + var div = document.createElement('div'); + div.innerHTML = + '' + + '' + + ''; + + var hostTemplate = div.querySelector('#x-host'); + var outerTemplate = div.querySelector('#x-outer'); + + var outer = div.querySelector('x-outer'); + var outerRoot = outer.createShadowRoot(); + outerRoot.appendChild(document.importNode(outerTemplate.content, true)); + + var host = outerRoot.querySelector('x-host'); + var hostRoot = host.createShadowRoot(); + hostRoot.appendChild(document.importNode(hostTemplate.content, true)); + + var t = outerRoot.querySelector('#test'); + assert.equal(getVisualText(div), 'Foo: [~Foo~~Foo+Bar~] Bar: [~Bar~]'); + t.setAttribute('foo', 'hi'); + assert.equal(getVisualText(div), 'Foo: [~Foo~~Foo+Bar~~Bar~] Bar: []'); + t.removeAttribute('foo'); + assert.equal(getVisualText(div), 'Foo: [~Foo~~Foo+Bar~] Bar: [~Bar~]'); + }); });