Is it ok to use a web component inside a web component?

A

Alexander2021-07-12 01:44:08

Web development

Alexander, 2021-07-12 01:44:08

Those. when there is another shadow-root inside the shadow-root?
Will this affect performance for example?

For example:

<!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>

Those. there is an mwc-tag element that implements the inscription and this inscription is made on the button.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Aetae, 2021-07-12
Madzhugin @Suntechnic

Fine. The essence of web components is that they should not differ in behavior from ordinary elements in any way. Nesting is also included.