From 971fcd288a14e7cb5713b032ce7176602156ff7f Mon Sep 17 00:00:00 2001 From: animesh68 Date: Mon, 7 Sep 2026 18:07:55 +0530 Subject: [PATCH] docs: clarify options_missing_custom_element warning regarding ShadowRoot CSS extraction (#18199) --- .changeset/clarify-options-missing-custom-element.md | 5 +++++ .../docs/98-reference/.generated/compile-warnings.md | 2 +- packages/svelte/messages/compile-warnings/options.md | 2 +- packages/svelte/src/compiler/warnings.js | 4 ++-- .../warnings.json | 2 +- .../custom-element-props-identifier-rest/warnings.json | 2 +- .../samples/custom-element-props-identifier/warnings.json | 2 +- .../samples/tag-custom-element-options-missing/warnings.json | 2 +- 8 files changed, 13 insertions(+), 8 deletions(-) create mode 100644 .changeset/clarify-options-missing-custom-element.md diff --git a/.changeset/clarify-options-missing-custom-element.md b/.changeset/clarify-options-missing-custom-element.md new file mode 100644 index 0000000000..c240feacd9 --- /dev/null +++ b/.changeset/clarify-options-missing-custom-element.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +docs: clarify `options_missing_custom_element` warning regarding ShadowRoot CSS extraction diff --git a/documentation/docs/98-reference/.generated/compile-warnings.md b/documentation/docs/98-reference/.generated/compile-warnings.md index 237ec105f6..95dcd89572 100644 --- a/documentation/docs/98-reference/.generated/compile-warnings.md +++ b/documentation/docs/98-reference/.generated/compile-warnings.md @@ -776,7 +776,7 @@ The `immutable` option has been deprecated. It will have no effect in runes mode ### options_missing_custom_element ``` -The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option? +The `customElement` option is used when generating a custom element, but `customElement: true` (or `css: 'injected'`) is not set in compiler options. If child components are rendered inside a ShadowRoot, their styles will be extracted externally and will not be visible inside the shadow tree. Set `compilerOptions.customElement: true` (or `css: 'injected'`) in `svelte.config.js` ``` ### options_removed_enable_sourcemap diff --git a/packages/svelte/messages/compile-warnings/options.md b/packages/svelte/messages/compile-warnings/options.md index 7e30c4c727..09602942a0 100644 --- a/packages/svelte/messages/compile-warnings/options.md +++ b/packages/svelte/messages/compile-warnings/options.md @@ -8,7 +8,7 @@ ## options_missing_custom_element -> The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option? +> The `customElement` option is used when generating a custom element, but `customElement: true` (or `css: 'injected'`) is not set in compiler options. If child components are rendered inside a ShadowRoot, their styles will be extracted externally and will not be visible inside the shadow tree. Set `compilerOptions.customElement: true` (or `css: 'injected'`) in `svelte.config.js` ## options_removed_enable_sourcemap diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js index 98f407671d..6fbb83fcd8 100644 --- a/packages/svelte/src/compiler/warnings.js +++ b/packages/svelte/src/compiler/warnings.js @@ -556,11 +556,11 @@ export function options_deprecated_immutable(node) { } /** - * The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option? + * The `customElement` option is used when generating a custom element, but `customElement: true` (or `css: 'injected'`) is not set in compiler options. If child components are rendered inside a ShadowRoot, their styles will be extracted externally and will not be visible inside the shadow tree. Set `compilerOptions.customElement: true` (or `css: 'injected'`) in `svelte.config.js` * @param {null | NodeLike} node */ export function options_missing_custom_element(node) { - w(node, 'options_missing_custom_element', `The \`customElement\` option is used when generating a custom element. Did you forget the \`customElement: true\` compile option?\nhttps://svelte.dev/e/options_missing_custom_element`); + w(node, 'options_missing_custom_element', `The \`customElement\` option is used when generating a custom element, but \`customElement: true\` (or \`css: 'injected'\`) is not set in compiler options. If child components are rendered inside a ShadowRoot, their styles will be extracted externally and will not be visible inside the shadow tree. Set \`compilerOptions.customElement: true\` (or \`css: 'injected'\`) in \`svelte.config.js\`\nhttps://svelte.dev/e/options_missing_custom_element`); } /** diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/warnings.json b/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/warnings.json index b880fe146c..3ab0d2fe31 100644 --- a/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/warnings.json +++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/warnings.json @@ -5,7 +5,7 @@ "column": 2, "line": 3 }, - "message": "The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?", + "message": "The `customElement` option is used when generating a custom element, but `customElement: true` (or `css: 'injected'`) is not set in compiler options. If child components are rendered inside a ShadowRoot, their styles will be extracted externally and will not be visible inside the shadow tree. Set `compilerOptions.customElement: true` (or `css: 'injected'`) in `svelte.config.js`", "start": { "column": 16, "line": 1 diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/warnings.json b/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/warnings.json index 61e11ab108..36646daa8c 100644 --- a/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/warnings.json +++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/warnings.json @@ -5,7 +5,7 @@ "column": 34, "line": 1 }, - "message": "The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?", + "message": "The `customElement` option is used when generating a custom element, but `customElement: true` (or `css: 'injected'`) is not set in compiler options. If child components are rendered inside a ShadowRoot, their styles will be extracted externally and will not be visible inside the shadow tree. Set `compilerOptions.customElement: true` (or `css: 'injected'`) in `svelte.config.js`", "start": { "column": 16, "line": 1 diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier/warnings.json b/packages/svelte/tests/validator/samples/custom-element-props-identifier/warnings.json index 4c50bbd116..b837b29839 100644 --- a/packages/svelte/tests/validator/samples/custom-element-props-identifier/warnings.json +++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier/warnings.json @@ -5,7 +5,7 @@ "column": 34, "line": 1 }, - "message": "The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?", + "message": "The `customElement` option is used when generating a custom element, but `customElement: true` (or `css: 'injected'`) is not set in compiler options. If child components are rendered inside a ShadowRoot, their styles will be extracted externally and will not be visible inside the shadow tree. Set `compilerOptions.customElement: true` (or `css: 'injected'`) in `svelte.config.js`", "start": { "column": 16, "line": 1 diff --git a/packages/svelte/tests/validator/samples/tag-custom-element-options-missing/warnings.json b/packages/svelte/tests/validator/samples/tag-custom-element-options-missing/warnings.json index b3b8054008..2bd635c309 100644 --- a/packages/svelte/tests/validator/samples/tag-custom-element-options-missing/warnings.json +++ b/packages/svelte/tests/validator/samples/tag-custom-element-options-missing/warnings.json @@ -1,7 +1,7 @@ [ { "code": "options_missing_custom_element", - "message": "The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?", + "message": "The `customElement` option is used when generating a custom element, but `customElement: true` (or `css: 'injected'`) is not set in compiler options. If child components are rendered inside a ShadowRoot, their styles will be extracted externally and will not be visible inside the shadow tree. Set `compilerOptions.customElement: true` (or `css: 'injected'`) in `svelte.config.js`", "start": { "line": 1, "column": 16