Show compiler warning/error for slot attribute not at the top level

[nolanlawson]

    <x-inner>
        <div>
            <span slot="foo">I am the foo slot</span>
        </div>
    </x-inner>

In the case above, the developer is probably confused because they seem to be trying to slot something into the foo slot of <x-inner>, but since it's inside a <div>, the whole<div> is actually treated as the default slotted content, and the slot attribute is effectively ignored. This works in all three of native shadow, synthetic shadow, and light DOM slots.

There are valid cases where it's not at the top level, e.g.:

    <x-inner>
        <template lwc:if={isTrue}>
            <span slot="foo">I am the foo slot</span>
        </template>
    </x-inner>

In this case, the <span> would truly go into the foo slot since the <template lwc:if> is not a "real" element.

We should enumerate all the cases where the slot attribute is valid or invalid when not at the top level and warn for it. Potentially in the future we could even throw an error to be more explicit.

[nolanlawson]

Doing a warning here is up for grabs, but doing an error is trickier so would probably have to be done with API versioning.

[nolanlawson]

The full list of Node types is here:

lwc/packages/@lwc/template-compiler/src/shared/types.ts

Lines 321 to 331 in e337b3c

	export type Node =
	| Root
	| ForBlock
	| If
	| IfBlock
	| ElseifBlock
	| ElseBlock
	| BaseElement
	| Comment
	| Text
	| ScopedSlotFragment;

Off the top of my head, the ones that are "valid" to have between the component (<x-inner> above) and the element with the slot attribute are If, IfBlock, ElseifBlock, ElseBlock. For ForBlock and ScopedSlotFragment I'm not sure.

[cardoso]

@nolanlawson this warning would need to be ignored here due to fixtures added in #4689 right?

lwc/packages/@lwc/engine-server/src/__tests__/fixtures.spec.ts

Lines 57 to 66 in cd41384

	// TODO [#3331]: The existing lwc:dynamic fixture test will generate warnings that can be safely suppressed.
	const shouldIgnoreWarning =
	message.includes('LWC1187') ||
	// TODO [#4497]: stop warning on duplicate slots or disallow them entirely (LWC1137 is duplicate slots)
	message.includes('LWC1137') ||
	message.includes('-h-t-m-l') ||
	code === 'CIRCULAR_DEPENDENCY';
	if (!shouldIgnoreWarning) {
	throw new Error(message);
	}

Example:

lwc/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/element/shadow/expected.html

Lines 15 to 19 in cd41384

	<div>
	<div slot="foo">
	I am the foo slot
	</div>
	</div>

[nolanlawson]

Yes, true.