Prosemirror adapter for React and Vue

I just tried this with the prosemirror-basic-schema

  // ...
  markViews: {
            link: (mark) => {
                const dom = document.createElement('a');
                const contentDOM = document.createElement('span');

                const { href, title } = mark.attrs;

                const post = `(${href}${title ? `, "${title}"` : ''})`;

                const preDOM = document.createElement('span');
                preDOM.style.color = 'blue';
                preDOM.appendChild(document.createTextNode('['));
                preDOM.appendChild(contentDOM);
                preDOM.appendChild(document.createTextNode(']'));

                const postDOM = document.createElement('span');
                postDOM.style.color = 'purple';
                postDOM.innerText = post;

                dom.appendChild(preDOM);
                dom.appendChild(postDOM);

                return {
                    dom,
                    contentDOM,
                };
}

And this is what I got:

Do you think it’s legal? Or it’s something anti-pattern that I didn’t realize.