@children Only Working in Chrome

[TonyLugg]

Using @children in a custom element is only working in Chrome. Adding @useShadowDOM to the custom element got it working in FireFox but it does not work in Edge. My elements have slots and two types of custom elements can be nested within each other forming a multi-level menu.

@fkleuver This is a carry over from our discussion in the vNext space.

[fkleuver]

@TonyLugg Thanks. Can you please post your markup and the piece of your typescript code that declares and consumes the @children decorator?

[fkleuver]

I did some digging and it seems the implementation differs based on whether you're having @useShadowDOM or not, but that implementation does not account for whether the browser actually supports shadowDOM or not (which Edge doesn't).

So for starters, you should probably either remove that @useShadowDOM decorator (apologies for the wrong advice there) or, if you do actually need to use shadow dom, polyfill it in Edge.

[fkleuver]

@bigopon you probably want to know about this too. Previous discussion at aurelia/aurelia#331

[TonyLugg]

<menu-list>
	<div>This is a menu</div>
	<menu-list-item>List item number 1</menu-list-item>
	<menu-list-item>List item number 2</menu-list-item>
	<menu-list-item>Sub menu 3
		<menu-list>
			<menu-list-item>Sub item number 1</menu-list-item>
			<menu-list-item>Sub item number 2</menu-list-item>
		</menu-list>
	</menu-list-item>
	<menu-list-item>List item number 4</menu-list-item>
</menu-list>

export class MenuListCustomElement {
	el: Element;
	@children('menu-list-item') items: any[];
	parentId: number;

	constructor(el: Element) {
		this.el = el;
		this.parentId = Math.floor((Math.random() * 1000000) + 1);
	}

	attached() {
		console.log('items', this.items);
		if (this.items) {
			for (let loItem of this.items) {
				console.log('loItem:', loItem);
				if (loItem.el && loItem.el.au && loItem.el.au.controller && loItem.el.au.controller.viewModel) {
					let vm = <MenuListItemCustomElement>loItem.el.au.controller.viewModel;
					console.log('loItem vm:', vm);
					console.log('uniqueId', vm.uniqueId);
					console.log('submenu', vm.subMenu);
				}
			}
		}
	}
}	

items is undefined when logged in Edge

[TonyLugg]

In Chrome I actually don't need to reference el.au.controller.viewModel, as the vm's are right there in the array of children.

[StrahilKazlachev]

1. So the issue is with items that are initially present? Not ones added later on?
2. Also the html markup is how you are using it?
   2.1 <menu-list> has a <slot>?

[TonyLugg]

@StrahilKazlachev Correct. All items in View HMTL. Each custom element has a slot (menu-list and menu-list-item). menu-list can create multiple menu-list-item's, menu-list-item can contain visual content and a single menu-item (a sub menu).

[fkleuver]

Yeah if you use slots then the view compiler enables ShadowDOM mode for the custom elements.
@StrahilKazlachev you are on point then about what you said on Discord.

@TonyLugg You could either try polyfilling ShadowDOM in Edge with shadydom, or you can use replaceable instead of slots to ensure ShadowDOM is not being used.

That said, this is still a valid issue as I believe we should be able to detect whether something is really shadowDOM or not, and if not, use the appropriate initialization logic.

[EisenbergEffect]

For vCurrent, you can use slots without ShadowDOM. If you do, the framework attempts to emulate. If you specify @useShdadowDOM and your browser doesn't support it, it also tries to emulate it. But, perhaps specifying @useShdadowDOM when there's no native support causes the issue with @children. I'd either polyfill ShadowDOM or remove @useShadowDOM as quick fixes. Let me know if either of those solves the problem.

[TonyLugg]

@EisenbergEffect I had originally not used @useShadowDOM and only Chrome was working for my use case. I added @useShadowDOM and FF worked but still Edge did not work.

[EisenbergEffect]

Can you create a simple repro based on the Aurelia CLI and attach it here? I'd like to take a look myself. This seems pretty surprising to me so either there's something not quite right in your project or we've had a major regression at some point.

[TonyLugg]

OK, I'm tied up for a few days but will get something for you soon.

[fkleuver]

@EisenbergEffect See #655 (comment)
The fact that he's using slots causes the view compiler to turn on shadowDOM mode for the element.

This in turn causes the children observer to go into a different traversal mode which doesn't work. I'm fairly sure it has been like this for a long long time. I also recall issues with slots + @children in the past, that's in fact the reason why I stopped even trying to use them. I never laid this link before however.

[EisenbergEffect]

Using slots in vCurrent should never force shadow dom to turn on. That's the whole reason for having slot emulation to begin with. If that is what is happening, then this is some sort of regression. It's definitely not always been that way.