Permission dialog breaks Custom Elements and shadow DOM. UI crash

[Jarda]

I have weird issues in Shadow DOM. UI crashes when permission dialog is shown and closed before.

I think this is UXP bug? How do I solve it properly?

@indranil

[Jarda]

I found a proper solution. But I don’t understand why I need to specify that explicitly. Is it because of UXP or because of me?

class MyElement extends HTMLElement {

	constructor() {
		super();
		// Tells Custom Element where it belongs. This fixed it.
		window.document.adoptNode(this);		
		// Attach a shadow root to the element.
		const shadowRoot = this.attachShadow({mode: "open"});

		// Create some content inside the shadow DOM.
		shadowRoot.innerHTML = "Loading...";
	}
    ...

[indranil]

I can confirm this is a bug. I have filed an internal tracking bug. Thanks for bringing up this use case. The underlying cause is indeed, as you mention, the permission dialog altering the owning documents of custom elements. I can’t commit to a timeline right now because there’s no fixed date by which apps would integrate the new release of UXP. Your solution is a possible workaround until we fix it.

[Jarda]

Thanks very much for the confirmation! Since I have workaround for this I am ok with it. Not sure how others if they use some 3rd party libraries. Or if that affects Spectrum Web Components.

[MalbertCunha]

Hi @Jarda , it’s really cool to know that within UXP there is the possibility of creating custom elements, right? If so, what dependencies, permissions in manifest.json? I’m doing some tests here in a vanilla plugin, but without success. What are the chances of you making available a simple model of a vanilla plugin containing a custom element?

class RedRoundedDiv extends HTMLElement {
    constructor() {
        super();

        window.document.adoptNode(this);		
        // Cria um Shadow DOM para encapsular o estilo
        const shadowRoot = this.attachShadow({ mode: "open" });

        // Cria um estilo e uma div
        const style = document.createElement('style');
        style.textContent = `
            .rounded {
                background-color: red;
                border-radius: 15px;
                width: 200px;
                height: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-weight: bold;
            }
        `;

        const div = document.createElement('div');
        div.classList.add('rounded');
        div.textContent = 'Eu sou uma div!';

        // Anexa o estilo e a div ao Shadow DOM
        shadowRoot.append(style, div);
    }
}

// Define o novo elemento
customElements.define('red-rounded-div', RedRoundedDiv);`Preformatted text`

[Jarda]

Turn on SWC feature flag. The rest is pretty much web standard. Any of hundreds articles on internet should work. I needed that to isolate styles where I don’t control over styled content. Iframe is not a thing and webview would be overkill with too much isolation.

[MalbertCunha]

Thanks for the quick response! SWC feature flag enabled. No success at the moment. Any other dependencies?