diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts index 487006ad53..3a21e356f5 100644 --- a/src/generators/dom/index.ts +++ b/src/generators/dom/index.ts @@ -97,6 +97,9 @@ export default function dom( parsed.html.build(); const { block } = parsed.html; + // prevent fragment being created twice (#1063) + if (options.customElement) block.builders.create.addLine(`this.c = @noop;`); + generator.stylesheet.warnOnUnusedSelectors(options.onwarn); const builder = new CodeBuilder(); diff --git a/test/custom-elements/index.js b/test/custom-elements/index.js index 917261ddec..a3287b5d10 100644 --- a/test/custom-elements/index.js +++ b/test/custom-elements/index.js @@ -19,6 +19,10 @@ describe('custom-elements', function() { const nightmare = new Nightmare({ show: false }); + nightmare.on('console', (type, ...args) => { + console[type](...args); + }); + let svelte; let server; let bundle; diff --git a/test/custom-elements/samples/nested/Counter.html b/test/custom-elements/samples/nested/Counter.html new file mode 100644 index 0000000000..fa6132f0f5 --- /dev/null +++ b/test/custom-elements/samples/nested/Counter.html @@ -0,0 +1,13 @@ + + + \ No newline at end of file diff --git a/test/custom-elements/samples/nested/main.html b/test/custom-elements/samples/nested/main.html new file mode 100644 index 0000000000..3be7e91177 --- /dev/null +++ b/test/custom-elements/samples/nested/main.html @@ -0,0 +1,12 @@ + +

clicked {{count}} times

+ + \ No newline at end of file diff --git a/test/custom-elements/samples/nested/test.js b/test/custom-elements/samples/nested/test.js new file mode 100644 index 0000000000..b9303f1e26 --- /dev/null +++ b/test/custom-elements/samples/nested/test.js @@ -0,0 +1,17 @@ +import * as assert from 'assert'; +import './main.html'; + +export default function (target) { + target.innerHTML = ''; + const el = target.querySelector('my-app'); + const counter = el.shadowRoot.querySelector('my-counter'); + const button = counter.shadowRoot.querySelector('button'); + + assert.equal(counter.count, 0); + assert.equal(counter.shadowRoot.innerHTML, ``); + + button.dispatchEvent(new MouseEvent('click')); + + assert.equal(counter.count, 1); + assert.equal(counter.shadowRoot.innerHTML, ``); +} \ No newline at end of file diff --git a/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js b/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js index c0b7861a63..3edee605c1 100644 --- a/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js +++ b/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js @@ -188,6 +188,7 @@ function create_main_fragment(state, component) { c: function create() { div = createElement("div"); div.textContent = "fades in"; + this.c = noop; }, m: function mount(target, anchor) { diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js index d921b0e79f..496586e632 100644 --- a/test/js/samples/css-shadow-dom-keyframes/expected.js +++ b/test/js/samples/css-shadow-dom-keyframes/expected.js @@ -8,6 +8,7 @@ function create_main_fragment(state, component) { c: function create() { div = createElement("div"); div.textContent = "fades in"; + this.c = noop; }, m: function mount(target, anchor) {