Нормально ли использовать вэб-компонент внутри вэб-компонента?

Т.е. когда внутри 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, реализующий надпись и это надпись сделана на кнопке.
  • Вопрос задан
  • 96 просмотров
Решения вопроса 1
Aetae
@Aetae
Тлен
Нормально. Суть вэб-компонентов в том, что они ничем снаружи не должны отличаться по поведению от обычных элементов. Вложенность сюда тоже входит.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы