From 1d495c8ad131cc9f360d8ac1f64ece212f1f5351 Mon Sep 17 00:00:00 2001 From: Zephraph Date: Tue, 23 Apr 2019 11:12:00 -0400 Subject: [PATCH 01/16] Add option to make usage of shadow dom configurable --- src/compile/render-dom/index.ts | 7 +++++-- src/interfaces.ts | 1 + src/internal/Component.js | 4 +++- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/compile/render-dom/index.ts b/src/compile/render-dom/index.ts index a6ef0ac69c23..eede9d2aa0e4 100644 --- a/src/compile/render-dom/index.ts +++ b/src/compile/render-dom/index.ts @@ -22,6 +22,8 @@ export default function dom( block.has_outro_method = true; + const should_use_shadow_dom = options.customElement && options.shadowDom !== false; + // prevent fragment being created twice (#1063) if (options.customElement) block.builders.create.add_line(`this.c = @noop;`); @@ -64,7 +66,7 @@ export default function dom( // TODO injecting CSS this way is kinda dirty. Maybe it should be an // explicit opt-in, or something? const should_add_css = ( - !options.customElement && + !should_use_shadow_dom && component.stylesheet.has_styles && options.css !== false ); @@ -445,8 +447,9 @@ export default function dom( constructor(options) { super(); - ${css.code && `this.shadowRoot.innerHTML = \`\`;`} + ${css.code && should_use_shadow_dom && `this.shadowRoot.innerHTML = \`\`;`} + // TODO: Figure out what target should point to @init(this, { target: this.shadowRoot }, ${definition}, create_fragment, ${not_equal}, ${prop_names}); ${dev_props_check} diff --git a/src/interfaces.ts b/src/interfaces.ts index fd34f31ea1af..806ef43e2d73 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -54,6 +54,7 @@ export interface CompileOptions { hydratable?: boolean; legacy?: boolean; customElement?: boolean; + shadowDom?: boolean; tag?: string; css?: boolean; diff --git a/src/internal/Component.js b/src/internal/Component.js index 530a48da5925..6c0dfc0dfa51 100644 --- a/src/internal/Component.js +++ b/src/internal/Component.js @@ -117,7 +117,9 @@ if (typeof HTMLElement !== 'undefined') { SvelteElement = class extends HTMLElement { constructor() { super(); - this.attachShadow({ mode: 'open' }); + if (options.shadowDom !== false) { + this.attachShadow({ mode: 'open' }); + } } connectedCallback() { From f3d0d2938d1272c50f60a819118ca2a00317777b Mon Sep 17 00:00:00 2001 From: Zephraph Date: Tue, 23 Apr 2019 17:49:06 -0400 Subject: [PATCH 02/16] Pass shadow dom options down to SvelteElement --- src/compile/render-dom/index.ts | 3 +-- src/internal/Component.js | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/compile/render-dom/index.ts b/src/compile/render-dom/index.ts index eede9d2aa0e4..9293f5dcc6e1 100644 --- a/src/compile/render-dom/index.ts +++ b/src/compile/render-dom/index.ts @@ -445,11 +445,10 @@ export default function dom( builder.add_block(deindent` class ${name} extends @SvelteElement { constructor(options) { - super(); + super(${should_use_shadow_dom ? '' : '{ use_shadow_dom: true }'}); ${css.code && should_use_shadow_dom && `this.shadowRoot.innerHTML = \`\`;`} - // TODO: Figure out what target should point to @init(this, { target: this.shadowRoot }, ${definition}, create_fragment, ${not_equal}, ${prop_names}); ${dev_props_check} diff --git a/src/internal/Component.js b/src/internal/Component.js index 6c0dfc0dfa51..43c0c62ca986 100644 --- a/src/internal/Component.js +++ b/src/internal/Component.js @@ -115,9 +115,9 @@ export function init(component, options, instance, create_fragment, not_equal, p export let SvelteElement; if (typeof HTMLElement !== 'undefined') { SvelteElement = class extends HTMLElement { - constructor() { + constructor({ use_shadow_dom = true } = {}) { super(); - if (options.shadowDom !== false) { + if (use_shadow_dom) { this.attachShadow({ mode: 'open' }); } } From 9e55be096324901153a6f74e5df52d723ceb33b5 Mon Sep 17 00:00:00 2001 From: Zephraph Date: Tue, 23 Apr 2019 17:50:27 -0400 Subject: [PATCH 03/16] Don't fail when no option is provided to SvelteElement --- src/internal/Component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/internal/Component.js b/src/internal/Component.js index 43c0c62ca986..0679b63023fb 100644 --- a/src/internal/Component.js +++ b/src/internal/Component.js @@ -115,7 +115,7 @@ export function init(component, options, instance, create_fragment, not_equal, p export let SvelteElement; if (typeof HTMLElement !== 'undefined') { SvelteElement = class extends HTMLElement { - constructor({ use_shadow_dom = true } = {}) { + constructor({ use_shadow_dom = true } = { use_shadow_dom: true }) { super(); if (use_shadow_dom) { this.attachShadow({ mode: 'open' }); From c599d6becd2296ad99920b4c86de60b3cbe84acc Mon Sep 17 00:00:00 2001 From: Zephraph Date: Tue, 23 Apr 2019 18:22:48 -0400 Subject: [PATCH 04/16] Add shadowDom option --- src/compile/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/compile/index.ts b/src/compile/index.ts index e80a937932a2..7533b891e785 100644 --- a/src/compile/index.ts +++ b/src/compile/index.ts @@ -21,6 +21,7 @@ const valid_options = [ 'hydratable', 'legacy', 'customElement', + 'shadowDom', 'tag', 'css', 'preserveComments', From c435703dd269071279ff2c91f26cc68c62315406 Mon Sep 17 00:00:00 2001 From: Zephraph Date: Tue, 23 Apr 2019 18:23:18 -0400 Subject: [PATCH 05/16] Use element instance as target when not using shadow dom --- src/compile/render-dom/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/compile/render-dom/index.ts b/src/compile/render-dom/index.ts index 9293f5dcc6e1..16186da92ded 100644 --- a/src/compile/render-dom/index.ts +++ b/src/compile/render-dom/index.ts @@ -449,7 +449,7 @@ export default function dom( ${css.code && should_use_shadow_dom && `this.shadowRoot.innerHTML = \`\`;`} - @init(this, { target: this.shadowRoot }, ${definition}, create_fragment, ${not_equal}, ${prop_names}); + @init(this, { target: this${should_use_shadow_dom ? '.shadowRoot' : ''} }, ${definition}, create_fragment, ${not_equal}, ${prop_names}); ${dev_props_check} From 2c8228a7eb882aa557eb1490c32792fe880982a5 Mon Sep 17 00:00:00 2001 From: Zephraph Date: Tue, 23 Apr 2019 18:23:40 -0400 Subject: [PATCH 06/16] Add a test.. --- .../_config.js | 6 +++ .../expected.js | 54 +++++++++++++++++++ .../input.svelte | 9 ++++ 3 files changed, 69 insertions(+) create mode 100644 test/js/samples/css-custom-element-no-shadow-dom/_config.js create mode 100644 test/js/samples/css-custom-element-no-shadow-dom/expected.js create mode 100644 test/js/samples/css-custom-element-no-shadow-dom/input.svelte diff --git a/test/js/samples/css-custom-element-no-shadow-dom/_config.js b/test/js/samples/css-custom-element-no-shadow-dom/_config.js new file mode 100644 index 000000000000..52d689af969b --- /dev/null +++ b/test/js/samples/css-custom-element-no-shadow-dom/_config.js @@ -0,0 +1,6 @@ +export default { + options: { + customElement: true, + shadowDom: false + } +}; \ No newline at end of file diff --git a/test/js/samples/css-custom-element-no-shadow-dom/expected.js b/test/js/samples/css-custom-element-no-shadow-dom/expected.js new file mode 100644 index 000000000000..69cccb431b9a --- /dev/null +++ b/test/js/samples/css-custom-element-no-shadow-dom/expected.js @@ -0,0 +1,54 @@ +/* generated by Svelte vX.Y.Z */ +import { + SvelteElement, + detach, + element, + init, + insert, + noop, + safe_not_equal +} from "svelte/internal"; + +function create_fragment(ctx) { + var h1; + + return { + c() { + h1 = element("h1"); + h1.textContent = "Hello world"; + this.c = noop; + }, + + m(target, anchor) { + insert(target, h1, anchor); + }, + + p: noop, + i: noop, + o: noop, + + d(detaching) { + if (detaching) { + detach(h1); + } + } + }; +} + +class Component extends SvelteElement { + constructor(options) { + super({ use_shadow_dom: true }); + + init(this, { target: this }, null, create_fragment, safe_not_equal, []); + + if (options) { + if (options.target) { + insert(options.target, this, options.anchor); + } + } + } +} + +customElements.define("custom-element", Component); + +export default Component; \ No newline at end of file diff --git a/test/js/samples/css-custom-element-no-shadow-dom/input.svelte b/test/js/samples/css-custom-element-no-shadow-dom/input.svelte new file mode 100644 index 000000000000..ecfe1205d9d4 --- /dev/null +++ b/test/js/samples/css-custom-element-no-shadow-dom/input.svelte @@ -0,0 +1,9 @@ + + +

Hello world

+ + \ No newline at end of file From fa5124a4566444bf3749cbdc8c3f85477c44244c Mon Sep 17 00:00:00 2001 From: Zephraph Date: Tue, 23 Apr 2019 19:22:30 -0400 Subject: [PATCH 07/16] Ensure SvelteElement gets correct shadow dom flag --- src/compile/render-dom/index.ts | 2 +- test/js/samples/css-custom-element-no-shadow-dom/expected.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/compile/render-dom/index.ts b/src/compile/render-dom/index.ts index 16186da92ded..6b2bbe1c291f 100644 --- a/src/compile/render-dom/index.ts +++ b/src/compile/render-dom/index.ts @@ -445,7 +445,7 @@ export default function dom( builder.add_block(deindent` class ${name} extends @SvelteElement { constructor(options) { - super(${should_use_shadow_dom ? '' : '{ use_shadow_dom: true }'}); + super(${should_use_shadow_dom ? '' : '{ use_shadow_dom: false }'}); ${css.code && should_use_shadow_dom && `this.shadowRoot.innerHTML = \`\`;`} diff --git a/test/js/samples/css-custom-element-no-shadow-dom/expected.js b/test/js/samples/css-custom-element-no-shadow-dom/expected.js index 69cccb431b9a..eb6fed9478dd 100644 --- a/test/js/samples/css-custom-element-no-shadow-dom/expected.js +++ b/test/js/samples/css-custom-element-no-shadow-dom/expected.js @@ -37,7 +37,7 @@ function create_fragment(ctx) { class Component extends SvelteElement { constructor(options) { - super({ use_shadow_dom: true }); + super({ use_shadow_dom: false }); init(this, { target: this }, null, create_fragment, safe_not_equal, []); From b7efcbe40044905eab3c37df919275d24826ca57 Mon Sep 17 00:00:00 2001 From: Zephraph Date: Tue, 23 Apr 2019 19:48:30 -0400 Subject: [PATCH 08/16] Set defaults for shadowDom and fail if in a bad config state --- src/compile/index.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/compile/index.ts b/src/compile/index.ts index 7533b891e785..9fadde3d3665 100644 --- a/src/compile/index.ts +++ b/src/compile/index.ts @@ -29,7 +29,7 @@ const valid_options = [ ]; function validate_options(options: CompileOptions, warnings: Warning[]) { - const { name, filename } = options; + const { name, filename, shadowDom, customElement } = options; Object.keys(options).forEach(key => { if (valid_options.indexOf(key) === -1) { @@ -54,6 +54,10 @@ function validate_options(options: CompileOptions, warnings: Warning[]) { toString: () => message, }); } + + if (!customElement && shadowDom) { + throw new Error(`options.shadowDom cannot be true if options.customElement is false`) + } } function get_name(filename) { @@ -75,7 +79,7 @@ function get_name(filename) { } export default function compile(source: string, options: CompileOptions = {}) { - options = assign({ generate: 'dom', dev: false }, options); + options = assign({ generate: 'dom', dev: false, shadowDom: options.customElement }, options); const stats = new Stats(); const warnings = []; From 711fd921ef4de47320088ecc92172e35587e60e1 Mon Sep 17 00:00:00 2001 From: Zephraph Date: Tue, 23 Apr 2019 20:21:09 -0400 Subject: [PATCH 09/16] Ensure stylesheets output for custom elements without shadowDom --- src/compile/Component.ts | 4 ++-- src/compile/render-dom/index.ts | 16 ++++++++-------- src/compile/render-ssr/index.ts | 2 +- src/parse/index.ts | 6 +++--- src/parse/state/tag.ts | 2 +- .../css-custom-element-no-shadow-dom/expected.js | 10 ++++++++++ 6 files changed, 25 insertions(+), 15 deletions(-) diff --git a/src/compile/Component.ts b/src/compile/Component.ts index bf2fdf9a5a59..3fcc4700707f 100644 --- a/src/compile/Component.ts +++ b/src/compile/Component.ts @@ -168,7 +168,7 @@ export default class Component { this.walk_instance_js_post_template(); - if (!compile_options.customElement) this.stylesheet.reify(); + if (!compile_options.shadowDom) this.stylesheet.reify(); this.stylesheet.warn_on_unused_selectors(this); } @@ -317,7 +317,7 @@ export default class Component { add_string(final_chunk); - css = compile_options.customElement ? + css = compile_options.shadowDom ? { code: null, map: null } : this.stylesheet.render(compile_options.cssOutputFilename, true); diff --git a/src/compile/render-dom/index.ts b/src/compile/render-dom/index.ts index 6b2bbe1c291f..196d248fe55e 100644 --- a/src/compile/render-dom/index.ts +++ b/src/compile/render-dom/index.ts @@ -22,8 +22,6 @@ export default function dom( block.has_outro_method = true; - const should_use_shadow_dom = options.customElement && options.shadowDom !== false; - // prevent fragment being created twice (#1063) if (options.customElement) block.builders.create.add_line(`this.c = @noop;`); @@ -33,12 +31,13 @@ export default function dom( builder.add_line(`const ${renderer.file_var} = ${JSON.stringify(component.file)};`); } - const css = component.stylesheet.render(options.filename, !options.customElement); + + const css = component.stylesheet.render(options.filename, !options.shadowDom); const styles = component.stylesheet.has_styles && stringify(options.dev ? `${css.code}\n/*# sourceMappingURL=${css.map.toUrl()} */` : css.code, { only_escape_at_symbol: true }); - if (styles && component.compile_options.css !== false && !options.customElement) { + if (styles && component.compile_options.css !== false && !options.shadowDom) { builder.add_block(deindent` function @add_css() { var style = @element("style"); @@ -66,7 +65,7 @@ export default function dom( // TODO injecting CSS this way is kinda dirty. Maybe it should be an // explicit opt-in, or something? const should_add_css = ( - !should_use_shadow_dom && + !options.shadowDom && component.stylesheet.has_styles && options.css !== false ); @@ -445,11 +444,12 @@ export default function dom( builder.add_block(deindent` class ${name} extends @SvelteElement { constructor(options) { - super(${should_use_shadow_dom ? '' : '{ use_shadow_dom: false }'}); + super(${options.shadowDom ? '' : '{ use_shadow_dom: false }'}); - ${css.code && should_use_shadow_dom && `this.shadowRoot.innerHTML = \`\`;`} + ${css.code && options.shadowDom && `this.shadowRoot.innerHTML = \`\`;`} + ${should_add_css && `if (!document.getElementById("${component.stylesheet.id}-style")) @add_css();`} - @init(this, { target: this${should_use_shadow_dom ? '.shadowRoot' : ''} }, ${definition}, create_fragment, ${not_equal}, ${prop_names}); + @init(this, { target: this${options.shadowDom ? '.shadowRoot' : ''} }, ${definition}, create_fragment, ${not_equal}, ${prop_names}); ${dev_props_check} diff --git a/src/compile/render-ssr/index.ts b/src/compile/render-ssr/index.ts index 10f82beb5e89..9cf02d271c21 100644 --- a/src/compile/render-ssr/index.ts +++ b/src/compile/render-ssr/index.ts @@ -19,7 +19,7 @@ export default function ssr( }, options)); // TODO concatenate CSS maps - const css = options.customElement ? + const css = options.shadowDom ? { code: null, map: null } : component.stylesheet.render(options.filename, true); diff --git a/src/parse/index.ts b/src/parse/index.ts index 39c6972213e0..2e1cc23bc54e 100644 --- a/src/parse/index.ts +++ b/src/parse/index.ts @@ -8,7 +8,7 @@ import error from '../utils/error'; interface ParserOptions { filename?: string; - customElement?: boolean; + shadowDom?: boolean; } type ParserState = (parser: Parser) => (ParserState | void); @@ -16,7 +16,7 @@ type ParserState = (parser: Parser) => (ParserState | void); export class Parser { readonly template: string; readonly filename?: string; - readonly customElement: boolean; + readonly shadowDom: boolean; index = 0; stack: Array = []; @@ -33,7 +33,7 @@ export class Parser { this.template = template.replace(/\s+$/, ''); this.filename = options.filename; - this.customElement = options.customElement; + this.shadowDom = options.shadowDom; this.html = { start: null, diff --git a/src/parse/state/tag.ts b/src/parse/state/tag.ts index 3747d2d482da..2e6f0a7e09cd 100644 --- a/src/parse/state/tag.ts +++ b/src/parse/state/tag.ts @@ -132,7 +132,7 @@ export default function tag(parser: Parser) { ? meta_tags.get(name) : (/[A-Z]/.test(name[0]) || name === 'svelte:self' || name === 'svelte:component') ? 'InlineComponent' : name === 'title' && parent_is_head(parser.stack) ? 'Title' - : name === 'slot' && !parser.customElement ? 'Slot' : 'Element'; + : name === 'slot' && !parser.shadowDom ? 'Slot' : 'Element'; const element: Node = { start, diff --git a/test/js/samples/css-custom-element-no-shadow-dom/expected.js b/test/js/samples/css-custom-element-no-shadow-dom/expected.js index eb6fed9478dd..0591092b9941 100644 --- a/test/js/samples/css-custom-element-no-shadow-dom/expected.js +++ b/test/js/samples/css-custom-element-no-shadow-dom/expected.js @@ -1,6 +1,7 @@ /* generated by Svelte vX.Y.Z */ import { SvelteElement, + append, detach, element, init, @@ -9,6 +10,13 @@ import { safe_not_equal } from "svelte/internal"; +function add_css() { + var style = element("style"); + style.id = 'svelte-pbe34-style'; + style.textContent = "h1.svelte-pbe34{color:blue}"; + append(document.head, style); +} + function create_fragment(ctx) { var h1; @@ -17,6 +25,7 @@ function create_fragment(ctx) { h1 = element("h1"); h1.textContent = "Hello world"; this.c = noop; + h1.className = "svelte-pbe34"; }, m(target, anchor) { @@ -38,6 +47,7 @@ function create_fragment(ctx) { class Component extends SvelteElement { constructor(options) { super({ use_shadow_dom: false }); + if (!document.getElementById("svelte-pbe34-style")) add_css(); init(this, { target: this }, null, create_fragment, safe_not_equal, []); From 0df811fe865ffffb6a9ebafe75e0456a72e76fdb Mon Sep 17 00:00:00 2001 From: Zephraph Date: Tue, 23 Apr 2019 20:21:48 -0400 Subject: [PATCH 10/16] Add a no-shadow-dom acceptance test --- test/custom-elements/index.js | 2 +- .../samples/no-shadow-dom/_config.js | 4 ++++ .../samples/no-shadow-dom/main.svelte | 9 +++++++++ .../samples/no-shadow-dom/test.js | 17 +++++++++++++++++ 4 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 test/custom-elements/samples/no-shadow-dom/_config.js create mode 100644 test/custom-elements/samples/no-shadow-dom/main.svelte create mode 100644 test/custom-elements/samples/no-shadow-dom/test.js diff --git a/test/custom-elements/index.js b/test/custom-elements/index.js index 32e95266ec85..304de2f7ebf2 100644 --- a/test/custom-elements/index.js +++ b/test/custom-elements/index.js @@ -81,7 +81,7 @@ describe('custom-elements', function() { if (id.endsWith('.svelte')) { const compiled = svelte.compile(code, { customElement: true, - dev: config.dev + ...config }); return compiled.js; diff --git a/test/custom-elements/samples/no-shadow-dom/_config.js b/test/custom-elements/samples/no-shadow-dom/_config.js new file mode 100644 index 000000000000..ad44e196d783 --- /dev/null +++ b/test/custom-elements/samples/no-shadow-dom/_config.js @@ -0,0 +1,4 @@ +export default { + customElement: true, + shadowDom: false +}; \ No newline at end of file diff --git a/test/custom-elements/samples/no-shadow-dom/main.svelte b/test/custom-elements/samples/no-shadow-dom/main.svelte new file mode 100644 index 000000000000..dd5d2d515f94 --- /dev/null +++ b/test/custom-elements/samples/no-shadow-dom/main.svelte @@ -0,0 +1,9 @@ + + +

Hello world!

+ + diff --git a/test/custom-elements/samples/no-shadow-dom/test.js b/test/custom-elements/samples/no-shadow-dom/test.js new file mode 100644 index 000000000000..2d6a6de09bbe --- /dev/null +++ b/test/custom-elements/samples/no-shadow-dom/test.js @@ -0,0 +1,17 @@ +import * as assert from 'assert'; +import CustomElement from './main.svelte'; + +export default function (target) { + new CustomElement({ + target + }); + + assert.equal(target.innerHTML, '

Hello world!

'); + + const el = target.querySelector('custom-element'); + const h1 = el.querySelector('h1'); + const { color } = getComputedStyle(h1); + + assert.equal(h1.textContent, 'Hello world!'); + assert.equal(color, 'rgb(0, 0, 255)'); +} \ No newline at end of file From 6ddad99ddd2cbbaf40a9617825b5bf81961cc8a0 Mon Sep 17 00:00:00 2001 From: Zephraph Date: Tue, 23 Apr 2019 23:33:33 -0400 Subject: [PATCH 11/16] Add slots test... currently failing. --- .../no-shadow-dom-with-slots.solo/_config.js | 4 ++++ .../no-shadow-dom-with-slots.solo/main.svelte | 7 +++++++ .../no-shadow-dom-with-slots.solo/other.svelte | 3 +++ .../no-shadow-dom-with-slots.solo/test.js | 17 +++++++++++++++++ 4 files changed, 31 insertions(+) create mode 100644 test/custom-elements/samples/no-shadow-dom-with-slots.solo/_config.js create mode 100644 test/custom-elements/samples/no-shadow-dom-with-slots.solo/main.svelte create mode 100644 test/custom-elements/samples/no-shadow-dom-with-slots.solo/other.svelte create mode 100644 test/custom-elements/samples/no-shadow-dom-with-slots.solo/test.js diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots.solo/_config.js b/test/custom-elements/samples/no-shadow-dom-with-slots.solo/_config.js new file mode 100644 index 000000000000..ad44e196d783 --- /dev/null +++ b/test/custom-elements/samples/no-shadow-dom-with-slots.solo/_config.js @@ -0,0 +1,4 @@ +export default { + customElement: true, + shadowDom: false +}; \ No newline at end of file diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots.solo/main.svelte b/test/custom-elements/samples/no-shadow-dom-with-slots.solo/main.svelte new file mode 100644 index 000000000000..3942b70e7ac0 --- /dev/null +++ b/test/custom-elements/samples/no-shadow-dom-with-slots.solo/main.svelte @@ -0,0 +1,7 @@ + + + + +Hello world \ No newline at end of file diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots.solo/other.svelte b/test/custom-elements/samples/no-shadow-dom-with-slots.solo/other.svelte new file mode 100644 index 000000000000..a9d62e355a3d --- /dev/null +++ b/test/custom-elements/samples/no-shadow-dom-with-slots.solo/other.svelte @@ -0,0 +1,3 @@ + + +

\ No newline at end of file diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots.solo/test.js b/test/custom-elements/samples/no-shadow-dom-with-slots.solo/test.js new file mode 100644 index 000000000000..85d868af2148 --- /dev/null +++ b/test/custom-elements/samples/no-shadow-dom-with-slots.solo/test.js @@ -0,0 +1,17 @@ +import * as assert from 'assert'; +import CustomElement from './main.svelte'; + +export default function (target) { + new CustomElement({ + target + }); + + assert.equal(target.innerHTML, '

Hello world!

'); + + const el = target.querySelector('custom-element'); + const h1 = el.querySelector('h1'); + const { color } = getComputedStyle(h1); + + assert.equal(h1.textContent, 'Hello world!'); + assert.equal(color, 'rgb(0, 0, 255)'); +} \ No newline at end of file From 0dc6825802465c5d84d2e566646cbfdd9d77bd31 Mon Sep 17 00:00:00 2001 From: Zephraph Date: Tue, 23 Apr 2019 23:42:04 -0400 Subject: [PATCH 12/16] Remove solo denotion from failing test --- .../_config.js | 0 .../main.svelte | 0 .../other.svelte | 0 .../test.js | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename test/custom-elements/samples/{no-shadow-dom-with-slots.solo => no-shadow-dom-with-slots}/_config.js (100%) rename test/custom-elements/samples/{no-shadow-dom-with-slots.solo => no-shadow-dom-with-slots}/main.svelte (100%) rename test/custom-elements/samples/{no-shadow-dom-with-slots.solo => no-shadow-dom-with-slots}/other.svelte (100%) rename test/custom-elements/samples/{no-shadow-dom-with-slots.solo => no-shadow-dom-with-slots}/test.js (100%) diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots.solo/_config.js b/test/custom-elements/samples/no-shadow-dom-with-slots/_config.js similarity index 100% rename from test/custom-elements/samples/no-shadow-dom-with-slots.solo/_config.js rename to test/custom-elements/samples/no-shadow-dom-with-slots/_config.js diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots.solo/main.svelte b/test/custom-elements/samples/no-shadow-dom-with-slots/main.svelte similarity index 100% rename from test/custom-elements/samples/no-shadow-dom-with-slots.solo/main.svelte rename to test/custom-elements/samples/no-shadow-dom-with-slots/main.svelte diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots.solo/other.svelte b/test/custom-elements/samples/no-shadow-dom-with-slots/other.svelte similarity index 100% rename from test/custom-elements/samples/no-shadow-dom-with-slots.solo/other.svelte rename to test/custom-elements/samples/no-shadow-dom-with-slots/other.svelte diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots.solo/test.js b/test/custom-elements/samples/no-shadow-dom-with-slots/test.js similarity index 100% rename from test/custom-elements/samples/no-shadow-dom-with-slots.solo/test.js rename to test/custom-elements/samples/no-shadow-dom-with-slots/test.js From c785c0b38c62ee9c96ba719757b6feef7f7b5b0b Mon Sep 17 00:00:00 2001 From: Zephraph Date: Tue, 23 Apr 2019 23:48:45 -0400 Subject: [PATCH 13/16] Remove asserts from old test --- .../samples/no-shadow-dom-with-slots/test.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots/test.js b/test/custom-elements/samples/no-shadow-dom-with-slots/test.js index 85d868af2148..494cff4ce5ff 100644 --- a/test/custom-elements/samples/no-shadow-dom-with-slots/test.js +++ b/test/custom-elements/samples/no-shadow-dom-with-slots/test.js @@ -9,9 +9,5 @@ export default function (target) { assert.equal(target.innerHTML, '

Hello world!

'); const el = target.querySelector('custom-element'); - const h1 = el.querySelector('h1'); - const { color } = getComputedStyle(h1); - - assert.equal(h1.textContent, 'Hello world!'); - assert.equal(color, 'rgb(0, 0, 255)'); + assert.equal(el.innerText, "Hello world!"); } \ No newline at end of file From 46b1843c4e39978800def6c0048ef98b31bc801f Mon Sep 17 00:00:00 2001 From: Zephraph Date: Sat, 27 Apr 2019 16:29:49 -0400 Subject: [PATCH 14/16] Add another slot test, add other element usage in test --- .../no-shadow-dom-with-slots/AsElement.svelte | 3 + .../AsImported.svelte | 3 + .../no-shadow-dom-with-slots/main.svelte | 6 +- .../no-shadow-dom-with-slots/other.svelte | 3 - .../samples/no-shadow-dom-with-slots/test.js | 2 +- .../AsElement.svelte | 3 + .../AsImport.svelte | 3 + .../_config.js | 6 + .../expected.js | 109 ++++++++++++++++++ .../input.svelte | 9 ++ 10 files changed, 141 insertions(+), 6 deletions(-) create mode 100644 test/custom-elements/samples/no-shadow-dom-with-slots/AsElement.svelte create mode 100644 test/custom-elements/samples/no-shadow-dom-with-slots/AsImported.svelte delete mode 100644 test/custom-elements/samples/no-shadow-dom-with-slots/other.svelte create mode 100644 test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsElement.svelte create mode 100644 test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsImport.svelte create mode 100644 test/js/samples/css-custom-element-no-shadow-dom-with-slots/_config.js create mode 100644 test/js/samples/css-custom-element-no-shadow-dom-with-slots/expected.js create mode 100644 test/js/samples/css-custom-element-no-shadow-dom-with-slots/input.svelte diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots/AsElement.svelte b/test/custom-elements/samples/no-shadow-dom-with-slots/AsElement.svelte new file mode 100644 index 000000000000..0d53cfe76637 --- /dev/null +++ b/test/custom-elements/samples/no-shadow-dom-with-slots/AsElement.svelte @@ -0,0 +1,3 @@ + + +

\ No newline at end of file diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots/AsImported.svelte b/test/custom-elements/samples/no-shadow-dom-with-slots/AsImported.svelte new file mode 100644 index 000000000000..baa5da90f15c --- /dev/null +++ b/test/custom-elements/samples/no-shadow-dom-with-slots/AsImported.svelte @@ -0,0 +1,3 @@ + + +

\ No newline at end of file diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots/main.svelte b/test/custom-elements/samples/no-shadow-dom-with-slots/main.svelte index 3942b70e7ac0..2e46f8e57cc7 100644 --- a/test/custom-elements/samples/no-shadow-dom-with-slots/main.svelte +++ b/test/custom-elements/samples/no-shadow-dom-with-slots/main.svelte @@ -1,7 +1,9 @@ -Hello world \ No newline at end of file +Hello +world \ No newline at end of file diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots/other.svelte b/test/custom-elements/samples/no-shadow-dom-with-slots/other.svelte deleted file mode 100644 index a9d62e355a3d..000000000000 --- a/test/custom-elements/samples/no-shadow-dom-with-slots/other.svelte +++ /dev/null @@ -1,3 +0,0 @@ - - -

\ No newline at end of file diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots/test.js b/test/custom-elements/samples/no-shadow-dom-with-slots/test.js index 494cff4ce5ff..2c6d5d91d890 100644 --- a/test/custom-elements/samples/no-shadow-dom-with-slots/test.js +++ b/test/custom-elements/samples/no-shadow-dom-with-slots/test.js @@ -6,7 +6,7 @@ export default function (target) { target }); - assert.equal(target.innerHTML, '

Hello world!

'); + assert.equal(target.innerHTML, '

Hello

world

'); const el = target.querySelector('custom-element'); assert.equal(el.innerText, "Hello world!"); diff --git a/test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsElement.svelte b/test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsElement.svelte new file mode 100644 index 000000000000..870b8976abe8 --- /dev/null +++ b/test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsElement.svelte @@ -0,0 +1,3 @@ + + +

\ No newline at end of file diff --git a/test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsImport.svelte b/test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsImport.svelte new file mode 100644 index 000000000000..675677268866 --- /dev/null +++ b/test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsImport.svelte @@ -0,0 +1,3 @@ + + +

\ No newline at end of file diff --git a/test/js/samples/css-custom-element-no-shadow-dom-with-slots/_config.js b/test/js/samples/css-custom-element-no-shadow-dom-with-slots/_config.js new file mode 100644 index 000000000000..52d689af969b --- /dev/null +++ b/test/js/samples/css-custom-element-no-shadow-dom-with-slots/_config.js @@ -0,0 +1,6 @@ +export default { + options: { + customElement: true, + shadowDom: false + } +}; \ No newline at end of file diff --git a/test/js/samples/css-custom-element-no-shadow-dom-with-slots/expected.js b/test/js/samples/css-custom-element-no-shadow-dom-with-slots/expected.js new file mode 100644 index 000000000000..7eb038c88cb9 --- /dev/null +++ b/test/js/samples/css-custom-element-no-shadow-dom-with-slots/expected.js @@ -0,0 +1,109 @@ +/* generated by Svelte vX.Y.Z */ +import { + SvelteElement, + detach, + element, + init, + insert, + mount_component, + noop, + safe_not_equal, + space, + text +} from "svelte/internal"; +import "./AsElement.svelte"; +import AsImport from "./AsImport.svelte"; + +// (9:0) +function create_default_slot(ctx) { + var t; + + return { + c() { + t = text("world"); + }, + + m(target, anchor) { + insert(target, t, anchor); + }, + + d(detaching) { + if (detaching) { + detach(t); + } + } + }; +} + +function create_fragment(ctx) { + var as_element, t_1, current; + + var asimport = new AsImport({ + props: { + $$slots: { default: [create_default_slot] }, + $$scope: { ctx } + } + }); + + return { + c() { + as_element = element("as-element"); + as_element.textContent = "hello"; + t_1 = space(); + asimport.$$.fragment.c(); + this.c = noop; + }, + + m(target, anchor) { + insert(target, as_element, anchor); + insert(target, t_1, anchor); + mount_component(asimport, target, anchor); + current = true; + }, + + p(changed, ctx) { + var asimport_changes = {}; + if (changed.$$scope) asimport_changes.$$scope = { changed, ctx }; + asimport.$set(asimport_changes); + }, + + i(local) { + if (current) return; + asimport.$$.fragment.i(local); + + current = true; + }, + + o(local) { + asimport.$$.fragment.o(local); + current = false; + }, + + d(detaching) { + if (detaching) { + detach(as_element); + detach(t_1); + } + + asimport.$destroy(detaching); + } + }; +} + +class Component extends SvelteElement { + constructor(options) { + super({ use_shadow_dom: false }); + + init(this, { target: this }, null, create_fragment, safe_not_equal, []); + + if (options) { + if (options.target) { + insert(options.target, this, options.anchor); + } + } + } +} + +customElements.define("custom-element", Component); + +export default Component; \ No newline at end of file diff --git a/test/js/samples/css-custom-element-no-shadow-dom-with-slots/input.svelte b/test/js/samples/css-custom-element-no-shadow-dom-with-slots/input.svelte new file mode 100644 index 000000000000..ffdebd0a558a --- /dev/null +++ b/test/js/samples/css-custom-element-no-shadow-dom-with-slots/input.svelte @@ -0,0 +1,9 @@ + + + + +hello +world From a197bc68c0072ee2a0a65ac4f0529091512dc128 Mon Sep 17 00:00:00 2001 From: Zephraph Date: Mon, 29 Apr 2019 23:14:15 -0400 Subject: [PATCH 15/16] Fix non-properly closed tags --- .../AsElement.svelte | 2 +- .../css-custom-element-no-shadow-dom-with-slots/AsImport.svelte | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsElement.svelte b/test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsElement.svelte index 870b8976abe8..0d53cfe76637 100644 --- a/test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsElement.svelte +++ b/test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsElement.svelte @@ -1,3 +1,3 @@ -

\ No newline at end of file +

\ No newline at end of file diff --git a/test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsImport.svelte b/test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsImport.svelte index 675677268866..cc19bd68f52e 100644 --- a/test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsImport.svelte +++ b/test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsImport.svelte @@ -1,3 +1,3 @@ -

\ No newline at end of file +

\ No newline at end of file From a5d6210912a34b2cdae16b8b512c107869cffec7 Mon Sep 17 00:00:00 2001 From: Zephraph Date: Tue, 30 Apr 2019 00:05:57 -0400 Subject: [PATCH 16/16] Rename test tags to make it easier to follow --- .../samples/no-shadow-dom-with-slots/AsImported.svelte | 2 +- .../samples/no-shadow-dom-with-slots/main.svelte | 4 ++-- test/custom-elements/samples/no-shadow-dom-with-slots/test.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots/AsImported.svelte b/test/custom-elements/samples/no-shadow-dom-with-slots/AsImported.svelte index baa5da90f15c..032e39256966 100644 --- a/test/custom-elements/samples/no-shadow-dom-with-slots/AsImported.svelte +++ b/test/custom-elements/samples/no-shadow-dom-with-slots/AsImported.svelte @@ -1,3 +1,3 @@ - +

\ No newline at end of file diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots/main.svelte b/test/custom-elements/samples/no-shadow-dom-with-slots/main.svelte index 2e46f8e57cc7..63c835d7bd74 100644 --- a/test/custom-elements/samples/no-shadow-dom-with-slots/main.svelte +++ b/test/custom-elements/samples/no-shadow-dom-with-slots/main.svelte @@ -2,8 +2,8 @@ Hello -world \ No newline at end of file +world \ No newline at end of file diff --git a/test/custom-elements/samples/no-shadow-dom-with-slots/test.js b/test/custom-elements/samples/no-shadow-dom-with-slots/test.js index 2c6d5d91d890..0c15b2debc0e 100644 --- a/test/custom-elements/samples/no-shadow-dom-with-slots/test.js +++ b/test/custom-elements/samples/no-shadow-dom-with-slots/test.js @@ -6,7 +6,7 @@ export default function (target) { target }); - assert.equal(target.innerHTML, '

Hello

world

'); + assert.equal(target.innerHTML, '

Hello

world

'); const el = target.querySelector('custom-element'); assert.equal(el.innerText, "Hello world!");