diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index 776cf1ab0b..eb21dad34c 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -219,7 +219,11 @@ export default function dom(
const message = generator.components.has(prop) ?
`${debugName} expected to find '${prop}' in \`data\`, but found it in \`components\` instead` :
`${debugName} was created without expected data property '${prop}'`;
- return `if (!('${prop}' in this._state)) console.warn("${message}");`
+
+ const conditions = [`!('${prop}' in this._state)`];
+ if (generator.customElement) conditions.push(`!('${prop}' in this.attributes)`);
+
+ return `if (${conditions.join(' && ')}) console.warn("${message}");`
})}
${generator.bindingGroups.length &&
`this._bindingGroups = [${Array(generator.bindingGroups.length).fill('[]').join(', ')}];`}
diff --git a/test/custom-elements/index.js b/test/custom-elements/index.js
index a3287b5d10..ce394c6b6a 100644
--- a/test/custom-elements/index.js
+++ b/test/custom-elements/index.js
@@ -3,7 +3,7 @@ import * as http from 'http';
import { rollup } from 'rollup';
import virtual from 'rollup-plugin-virtual';
import Nightmare from 'nightmare';
-import { loadSvelte } from "../helpers.js";
+import { loadSvelte, loadConfig } from "../helpers.js";
const page = `
@@ -57,6 +57,8 @@ describe('custom-elements', function() {
const solo = /\.solo$/.test(dir);
(solo ? it.only : it)(dir, () => {
+ const config = loadConfig(`./custom-elements/samples/${dir}/_config.js`);
+
return rollup({
input: `test/custom-elements/samples/${dir}/test.js`,
plugins: [
@@ -64,7 +66,8 @@ describe('custom-elements', function() {
transform(code, id) {
if (id.endsWith('.html')) {
const compiled = svelte.compile(code, {
- customElement: true
+ customElement: true,
+ dev: config.dev
});
return {
diff --git a/test/custom-elements/samples/no-missing-prop-warnings/_config.js b/test/custom-elements/samples/no-missing-prop-warnings/_config.js
new file mode 100644
index 0000000000..e26996239d
--- /dev/null
+++ b/test/custom-elements/samples/no-missing-prop-warnings/_config.js
@@ -0,0 +1,3 @@
+export default {
+ dev: true
+};
\ No newline at end of file
diff --git a/test/custom-elements/samples/no-missing-prop-warnings/main.html b/test/custom-elements/samples/no-missing-prop-warnings/main.html
new file mode 100644
index 0000000000..088c96947a
--- /dev/null
+++ b/test/custom-elements/samples/no-missing-prop-warnings/main.html
@@ -0,0 +1,8 @@
+foo: {{foo}}
+bar: {{bar}}
+
+
\ No newline at end of file
diff --git a/test/custom-elements/samples/no-missing-prop-warnings/test.js b/test/custom-elements/samples/no-missing-prop-warnings/test.js
new file mode 100644
index 0000000000..675fa66485
--- /dev/null
+++ b/test/custom-elements/samples/no-missing-prop-warnings/test.js
@@ -0,0 +1,18 @@
+import * as assert from 'assert';
+import './main.html';
+
+export default function (target) {
+ const warnings = [];
+ const warn = console.warn;
+
+ console.warn = warning => {
+ warnings.push(warning);
+ };
+
+ target.innerHTML = '';
+
+ assert.equal(warnings.length, 1);
+ assert.equal(warnings[0], ` was created without expected data property 'bar'`);
+
+ console.warn = warn;
+}
\ No newline at end of file