从shadowRoot内的脚本标签中查找shadowRoot？

Question

我正在尝试找到一个与我注入到shadow dom中的脚本相关的选择器。

如果我使用文档明确找到所需的元素，然后选择shadowRoot并再次使用querySelector，我就可以找到所需的元素。

即

var selector = "document.querySelector('#shadow').shadowRoot.querySelector('img')";

是否可以获取shadowRoot而无需从shadowRoot中显式获取它所在的元素？

我已经尝试过

document.currentScript

但是在shadow dom中执行时它返回为null

document.querySelector('#shadow').attachShadow({mode: 'open'}); 
var shadow = document.querySelector('#shadow');

shadow.shadowRoot.innerHTML =  '<img id="img"><div></div>';

var scriptElement = document.createElement('script');


// Can this be relative to the script tag?
var selector = "document.querySelector('#shadow').shadowRoot.querySelector('img')";

scriptElement.textContent = `

    JsBarcode(${selector}, "401246",
                    {
                        format: "CODE128",
                        displayValue: true,
                        height: 25,
                        width: 1,
                        fontSize: 16,
                        lineColor: "#000000"
                    }
                );
`;



var shadowDiv = document.querySelector('#shadow').shadowRoot.querySelector('div');

shadowDiv.appendChild(scriptElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <h1 id="header"></h1>

    <div id="shadow">
    
    </div>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js"></script>

    <script src="src/script.js"></script>
  </body>
</html>

Answer 1

<script>

在全局范围内运行，而不是在shadowRoot范围内运行。

防止第3方脚本多次加载。

加载
```
<script>
```
（在
```
<head>
```
或任何地方）
使用脚本
```
onload
```
事件
- （全局 JsBarCode 函数现已定义）
- 然后创建一个新的Web组件
```
<jsbar-code>
```
- 编码任何现有或未来
```
<jsbar-code>
```
  标签
每个
```
<jsbar-code>
```
都会调用（全局！）
```
JsBarCode function
```
来在其shadowDOM
```
中转换自己的
```
<svg>

<jsbar-code value="210169"></jsbar-code>
<jsbar-code value="12312023" fontSize="21"></jsbar-code>
<jsbar-code format="upc" value="123456789012" textmargin="0" fontoptions="bold"></jsbar-code>
<jsbar-code format="pharmacode" lineColor="#0aa" width="4" height="40" value="21" displayValue="0"></jsbar-code>

<script>
  document.head.append(
    Object.assign(document.createElement("script"), {
      src: "//cdn.jsdelivr.net/npm/[email protected]/dist/JsBarcode.all.min.js",
      onload: () => {
        customElements.define(
          "jsbar-code",
          class extends HTMLElement {
            connectedCallback() {
              this.attachShadow({mode:"open"}).innerHTML = `<svg></svg>`;
              let attr = (x) => this.getAttribute(x) || "";
              let options = { // default options
                format: "CODE128",
                displayValue: attr("displayValue") != "0",
                height: 25,
                width: 1,
                fontSize: 16,
                lineColor: attr("lineColor") || "black"
              };
              Array.from(this.attributes).forEach(({
                nodeName, // override defaults with attribute settings
                nodeValue
              }) => options[nodeName] = nodeValue);
              // execute Global function
              JsBarcode(this.shadowRoot.querySelector("svg"), options.value, options);
            }
          }
        );
      }
    }))
</script>

也可在 JSFiddle Playground 中使用：https://jsfiddle.net/WebComponents/baeqszjm/

从shadowRoot内的脚本标签中查找shadowRoot？

问题描述投票：0回答：1

1个回答

最新问题

从shadowRoot内的脚本标签中查找shadowRoot？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1