【前端】如何展示富文本？

想必前端er对富文本编辑都不陌生，常见的编辑器比如 TinyMCE、WangEditor、Ueditor 等都非常优秀，使用起来很方便，最后生成的 html 代码一般也不会有副作用，但是怎么展示富文本才好呢？

最近公司在这方面就遇到一些棘手的问题，主要是 html 富文本来源不安全，已经遇到的问题有：

1. 富文本内容有<base/>标签，修改了系统接口路径；
2. 内容有<style></style>标签，覆盖了系统全局样式，使页面变得畸形；

还有些其他我不知道的问题，但是到了我这里，我决定让他一劳永逸，坚决杜绝此类问题再次发生，于是我用了这个办法：

// richtext-display.jsx

import React, {useEffect, useRef} from 'react';

export default function RichTextDisplay({content, className}) {
    const contentRef = useRef();
    useEffect(() => {
        const now = contentRef.current;
        if (now) {
            (now.shadowRoot || now.attachShadow({mode: 'open'})).innerHTML = (content || '');
        }
    }, [content, contentRef.current]);
    return (<div className={className} ref={contentRef}></div>);
}

用Shadow DOM展示富文本，天然的隔离环境~，解决了以上所有问题，代码简单，不用引入其他包或者手写xss防御逻辑，是不是再优秀不过了