How to Create a Custom Element with a Shadow Root Already Attached

Having a simple custom element

document.registerElement('x-foo', {
    prototype: HTMLElement.prototype;
});

I can create an HTML node

<x-foo></x-foo>

then select it in JavaScript, and attach a shadow root.

var xFoo = document.querySelector('x-foo')[0]
var root = xFoo.createShadowRoot() ;
root.textContent = 'I am a shadow root';

However, I would like the objects to be created with a predefined shadow root, without any JavaScript manipulations afterwards, as it is with <input> and other user-agent defined nodes.

How would I define a constructor or something for my element in order to achieve this?