Почему не применяется стиль класса и кнопка работает внутри веб-компонента ⇐ Javascript

[Anonymous]

Я пытаюсь понять, как создать веб-компонент с атрибутами. В следующем коде есть две проблемы, которые я не понимаю:

• Div с текстом «стиль класса не применяется» не применяет нечетный класс класса, предоставленный шаблоном, несмотря на его наличие.
• На кнопке просто отображается текст «неработающая кнопка», кнопки, на которую можно нажать, нет.

testTemplate




function domCell(x, y) {
return '' +
'the style of class is not applied' +
'
' + x + '-' + y + '
' +
'' +
'non working button' +
'' +
'' ;
}

function styleCell() {
return [
' .even {' +
' color: white;' +
' background-color: red;' +
' }' ,
' p {' +
' color: white;' +
' background-color: green;' +
' }' ,
' .odd {' +
' color: red;' +
' background-color: white;' +
' }' ,
' div { ' +
' width: 150px;' +
' height: 50px;' +
' }',
' .hide {' +
' display: none;' +
' }'
];
}

customElements.define(
"custom-cell",
class extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: "open" });
const sheet = new CSSStyleSheet();
for (const rule of styleCell()) {
sheet.insertRule(rule);
}
shadowRoot.adoptedStyleSheets.push(sheet);
}

connectedCallback() {

const shadowRoot = this.shadowRoot;

let xPosition = this.getAttribute("x");
let yPosition = this.getAttribute("y");
if(xPosition === null) {
xPosition = 300;
}
if(yPosition === null) {
yPosition = 400;
}
let stringCell = domCell(xPosition, yPosition);
let doc = new DOMParser().parseFromString(stringCell, "text/xml");
shadowRoot.appendChild(doc.documentElement);
}
},
);










Подробнее здесь: https://stackoverflow.com/questions/798 ... bcomponent