Disclaimer: this is based on my limited understanding of custom elements – please correct me if I got something wrong!
Think of an
<input> element. It does a lot more than a
<span>, but it’s still a single element. The implementation logic is hidden away, so all you need to do is set some attributes and/or properties and you’ve got a nice text input.
<input>s use the shadow dom!).
As far as how to create a custom element, I’d refer you to that MDN page you linked. Is there anything in particular that was confusing on that page?