Для серверного рендеринга web components, мне надо что бы у меня выполнился скрипт на странице. Если я делаю запрос на сервер и получаю ответ строка читается хорошо, но когда я делаю fetch запрос на сервер, что бы уже на существующей странице добавить компонент ответ я получаю но не знаю как выполнить скрипт.
Упрощённо, строка для рендеринга выгляди так:
`<script>function __ssr(){console.log('exprestion')}>
<script>__ssr()</script>`
реальная строка:
`<script>function __ssr(){var a=document.currentScript.previousElementSibling,b=a.firstElementChild;a.removeChild(b);for(var c=a.attachShadow({mode:"open"});b.hasChildNodes();)c.appendChild(b.firstChild);}</script><x-hello><shadow-root><span>Hello, <x-yell><shadow-root><strong><slot></slot></strong></shadow-root><slot></slot></x-yell><script>__ssr()</script>!</span></shadow-root>World</x-hello><script>__ssr()</script>`
Как получив fetch запросом эту строку с сервера выполнить на странице для рендеринга веб компонента ?
Необходимо экранировать / -> \/, так это даже в сниппет не лезет, однако если это приходит с сервера можно сделать это регуляркой.
а дальше просто присоединить к странице
let str = '<script>function __ssr(){var a=document.currentScript.previousElementSibling,b=a.firstElementChild;a.removeChild(b);for(var c=a.attachShadow({mode:"open"});b.hasChildNodes();)c.appendChild(b.firstChild);}<\/script><x-hello><shadow-root><span>Hello, <x-yell><shadow-root><strong><slot><\/slot><\/strong><\/shadow-root><slot><\/slot><\/x-yell><script>__ssr()<\/script>!<\/span><\/shadow-root>World<\/x-hello><script>__ssr()<\/script>';
setTimeout(e => $('body').append(str), 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1234
PS: через eval можно было бы если только скрипт приезжал, но у Вас там разметка...
Продвижение своими сайтами как стратегия роста и независимости