diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts index bccfa3288b..8e0ec3404c 100644 --- a/src/generators/dom/index.ts +++ b/src/generators/dom/index.ts @@ -210,7 +210,7 @@ export default function dom( ${generator.customElement ? deindent` this.attachShadow({ mode: 'open' }); - ${css && `this.shadowRoot.innerHTML = \`\`;`} + ${css && `this.shadowRoot.innerHTML = \`\`;`} ` : (generator.stylesheet.hasStyles && options.css !== false && `if (!document.getElementById("${generator.stylesheet.id}-style")) @add_css();`) diff --git a/test/custom-elements/index.js b/test/custom-elements/index.js index 54aefa3885..917261ddec 100644 --- a/test/custom-elements/index.js +++ b/test/custom-elements/index.js @@ -50,7 +50,9 @@ describe('custom-elements', function() { fs.readdirSync('test/custom-elements/samples').forEach(dir => { if (dir[0] === '.') return; - it(dir, () => { + const solo = /\.solo$/.test(dir); + + (solo ? it.only : it)(dir, () => { return rollup({ input: `test/custom-elements/samples/${dir}/test.js`, plugins: [ diff --git a/test/custom-elements/samples/escaped-css/main.html b/test/custom-elements/samples/escaped-css/main.html new file mode 100644 index 0000000000..1f86593b8f --- /dev/null +++ b/test/custom-elements/samples/escaped-css/main.html @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/test/custom-elements/samples/escaped-css/test.js b/test/custom-elements/samples/escaped-css/test.js new file mode 100644 index 0000000000..bd148ad5a7 --- /dev/null +++ b/test/custom-elements/samples/escaped-css/test.js @@ -0,0 +1,13 @@ +import * as assert from 'assert'; +import CustomElement from './main.html'; + +export default function (target) { + new CustomElement({ + target + }); + + const icon = target.querySelector('custom-element').shadowRoot.querySelector('.icon'); + const before = getComputedStyle(icon, '::before'); + + assert.equal(before.content, JSON.stringify(String.fromCharCode(0xff))); +} \ No newline at end of file