diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index d97c3bc73000..c6b9b4552e1c 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/src/compiler/compile/render_dom/index.ts @@ -442,7 +442,7 @@ export default function dom( constructor(options) { super(); - ${css.code && b`this.shadowRoot.innerHTML = \`\`;`} + ${css.code && b`this.shadowRoot.innerHTML = \`\`;`} @init(this, { target: this.shadowRoot }, ${definition}, ${has_create_fragment ? 'create_fragment': 'null'}, ${not_equal}, ${prop_indexes}, ${dirty}); diff --git a/test/custom-elements/samples/global-styles/main.svelte b/test/custom-elements/samples/global-styles/main.svelte new file mode 100644 index 000000000000..c14175f85571 --- /dev/null +++ b/test/custom-elements/samples/global-styles/main.svelte @@ -0,0 +1,9 @@ + + + + +

diff --git a/test/custom-elements/samples/global-styles/test.js b/test/custom-elements/samples/global-styles/test.js new file mode 100644 index 000000000000..103f24868771 --- /dev/null +++ b/test/custom-elements/samples/global-styles/test.js @@ -0,0 +1,12 @@ +import * as assert from 'assert'; +import CustomElement from './main.svelte'; + +export default function (target) { + new CustomElement({ + target + }); + + const style = target.querySelector('custom-element').shadowRoot.querySelector('style'); + + assert.equal(style.textContent, 'p.active{color:rgb(128, 128, 128)}'); +}