В vanilla JS элемент слота должен быть стилизованным / способным принимать .class?

Question

Я пытался использовать элемент slot, чтобы сгладить мою дом, особенно в сложных компонентах.И в Safari, и в Chrome я могу добавить css к элементу slot через тег style в shadow dom, и включенный стиль будет влиять на дочерние элементы.Пример:

  
      class FcCol extends HTMLElement {
	constructor(g) {
		super();
		this._g = g;
		Object.defineProperty(this, "g", {
			enumerable: true,
			configurable: true,
			get: function() {
				return this._g;
			}
		});
		this.colors = ["orange", "green", "violet", "blue", "brown"];
		this.templater = (data, g) =>
			`${data
				.map(
					(a, i) =>
						`<div slot="${
							i < 5 ? "top" : i < 10 ? "middle" : "bottom"
						}" style="flex:${i % (Math.random() * 12) + 1} ;background:${
							this.colors[i % this.colors.length]
						};">${g != undefined && g.length > 0 ? g[i % g.length] : i}</div>`
				)
				.join("")}`;
		let template = document.querySelector("template[name='col1']");
		this.attachShadow({ mode: "open" }).appendChild(
			template.content.cloneNode(true)
		);
		this.innerHTML = this.templater(
					[...new Array(15)].map((a, i) => i),
					this.g
				)
	}
}
customElements.define("fc-col", FcCol);

<template name="col1">
				<style id="balancedcolumn">:host{display:flex; flex-flow: column nowrap; justify-content: space-between; align-content: stretch; align-self: stretch;}slot.row{box-shadow: 3px 4px 2px 3px #4a073f; display: flex; flex-flow: row nowrap; justify-content: space-between; align-content: stretch; align-self: stretch; padding: 1px 6px; background: #aecdfe;}::slotted(div){margin: 1px 3px; display: flex; width:100%; height: 45px; }</style>
				<slot class="row top" name="top"></slot>
				<slot class="row middle" name="middle"></slot>
				<slot class="row bottom" name="bottom"></slot>
			</template>
      
      <fc-col>
			</fc-col>

В приведенном выше примере CSS применяется к слоту и его дочерним элементам.Это позволяет мне составить столбец с тремя рядами с прорезями, теперь обертки, без дополнительных элементов ... Я получаю хорошую квартиру.Как показано вне shadowRoot, мой dom - просто fc-col, затем некоторые div-ы ... У меня нет дополнительных упаковщиков строк.

У меня нет проблем в Chrome, FF dev, Safari.В Brave оформление слотов терпит неудачу.В Edge ничего не получается ... никаких пользовательских элементов.Мой вопрос: каково поведение слота?Это стиль?Если нет, то я немного сбит с толку относительно его цели.

Спасибо за любые советы заранее.Я уже посмотрел на то, что мы получили в спецификации, и было неясно, как слот будет или должен рассматриваться всеми браузерами.

С уважением,

Джейсон