The following code contains a string within a string. Since the bodies of es6 classes are in strict mode, it fails to compile due to the inner string looking like it contains an octal value.
class Test {
static get template () { return `
.class {
content: "\2713\0020"
}
`}
}
Workarounds include escaping the string or using characters in their non-unicode form.
My workflow involves creating the HTML and CSS in a fiddle, then copy-pasting the code into an encapsulating es6 class (I'm limited to using a single file).
Is there anything I can do to avoid the error? I was hoping to wrap the string but it is still within the class body.
You might use String.raw
with the template literal, so that the backslashes are interpreted as literal backslashes, not escape characters:
class Test {
static get template () { return String.raw`
.class:before {
content: "\2713\0020"
}
`}
}
document.body.appendChild(document.createElement('style')).textContent = Test.template;
<div class="class">text</div>
(note that content
only applies to :before
and :after
psuedo-elements)