提示错误：Uncaught TypeError: shadowHost.createShadowRoot is not a function

亚细亚 2020-11-04 09:05:25

提示说createShadowRoot不是一个函数。运行如下图所示：



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>overflow</title>

    <style>

      #app {margin: 100px;}

      .shadow-child {

        color: red;

      }

    </style>

  </head>

  <body>

    <div id="app">

      <div class="shadow-cls">hello, kongzhi</div>

    </div>

    <script type="text/javascript"  >

       alert("sdf")

      // 1. 获取影子宿主 shadow host

      var shadowHost = document.querySelector('.shadow-cls');

			

      // 2. 创建影子 shadow root

      var shadowRoot = shadowHost.createShadowRoot();

		

      // 3. shadow root 作为影子树的第一个节点，其他的节点，比如如下的p节点都是它的子节点。

      shadowRoot.innerHTML = '<p class="shadow-child">我是子节点</p>';

    </script>

  </body>

</html>

不知什么原因？

...全文

8311 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

愤怒的大香蕉 2022-03-04

打赏
举报

这个createShadowRoot (),改了，
const shadowRoot = shadowHost.attachShadow({
mode: 'open'
})就可以了

杉菜酱子 2022-12-07

@愤怒的大香蕉这个可以！

亚细亚 2020-11-09

打赏
举报

是什么原因，哪位高人给点提示？

jio可 2020-11-04

打赏
举报

创建dom用createElement('xx') div/p/span/a/ul/li ....

亚细亚 2020-11-04

打赏
举报

网上有人说是升级jquery就可以了，但是升级到jquery-3.5.1后，虽然运行没有了错误，可是没有达到效果，就是没有出现文本："我是子节点".



<script type="text/javascript" src="jquery/jquery-3.5.1.js">

 

      // 1. 获取影子宿主 shadow host

      var shadowHost = document.querySelector('.shadow-cls');

			

      // 2. 创建影子 shadow root

      var shadowRoot = shadowHost.createShadowRoot();

		

      // 3. shadow root 作为影子树的第一个节点，其他的节点，比如如下的p节点都是它的子节点。

      shadowRoot.innerHTML = '<p class="shadow-child">我是子节点</p>';

 

    </script>