Т.е. когда внутри shadow-root есть ещё один shadow-root?
Не скажется ли это на производительности например?
К примеру:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<mwc-tag>надпись</mwc-tag>
<mwc-button>надпись на кнопке</mwc-button>
</body>
<foot>
<script>
class mwcTag extends HTMLElement
{
static get observedAttributes() {
return ['src'];
}
constructor ()
{
super()
var shadow = this.attachShadow({mode: 'open'}); //{mode: 'open'});
// Создание spans
var rootElement = document.createElement('div');
if (this.hasAttribute('src')) {
var img = document.createElement('img');
img.setAttribute('src',this.getAttribute('src'));
rootElement.appendChild(img);
}
if (this.innerHTML != '') {
var span = document.createElement('span');
span.innerHTML = this.innerHTML;
this.innerHTML = '';
rootElement.appendChild(span);
}
shadow.appendChild(rootElement);
}
attributeChangedCallback (name, oldValue, newValue)
{
}
}
customElements.define( "mwc-tag", mwcTag );
class mwcButton extends HTMLElement
{
constructor ()
{
super();
var shadow = this.attachShadow({mode: 'open'}); //{mode: 'open'});
let html = '<mwc-tag';
if (this.hasAttribute('src')) html = html+'src="'+this.getAttribute('src')+'"';
html = html+'>' + this.innerHTML + '</mwc-tag>';
shadow.innerHTML = html;
}
}
customElements.define( "mwc-button", mwcButton );
</script>
</foot>
</html>
Т.е. тут есть элемет mwc-tag, реализующий надпись и это надпись сделана на кнопке.
