Создание сценария JavaScript для теневого DOM - PullRequest
0 голосов
/ 22 марта 2020

Возможно ли включить JavaScript в теневом DOM? Я попробовал ниже, и это не работает. Если нет, каковы альтернативы:

@Component({
  selector: 'app-website-layout',
  templateUrl: './website-layout.component.html',
  encapsulation: ViewEncapsulation.ShadowDom
})
export class WebsiteLayoutComponent implements OnInit, AfterViewInit {
    private static appendCssToShadowRoot(shadowRoot, src) {
    const link = document.createElement('link');
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('href', src);
    link.setAttribute('type', 'text/css');
    shadowRoot.prepend(link);
  }

  private static appendJs(src) {
    const script = document.createElement('script');
    script.src = src;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  ngAfterViewInit() {
    const shadowRoot: DocumentFragment = this.element.nativeElement.shadowRoot;
    WebsiteLayoutComponent.appendJs('https://code.jquery.com/jquery-3.4.1.min.js');
    WebsiteLayoutComponent.appendJs('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js');
    WebsiteLayoutComponent.appendJs('https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js');
    WebsiteLayoutComponent.appendCssToShadowRoot(shadowRoot, 'assets/css/website.css');
    WebsiteLayoutComponent.appendCssToShadowRoot(shadowRoot, 'assets/css/page.css');
    WebsiteLayoutComponent.appendCssToShadowRoot(shadowRoot, 'assets/css/fonts.css');
  } 
}

Я также попробовал следующее, и это не работает

  private static appendJsToShadowRoot(shadowRoot, src) {
    const link = document.createElement('script');
    link.setAttribute('src', src);
    shadowRoot.prepend(link);
  }

  WebsiteLayoutComponent.appendJsToShadowRoot(shadowRoot, 'assets/js/popper.min.js');
  WebsiteLayoutComponent.appendJsToShadowRoot(shadowRoot, 'assets/js/bootstrap.min.js');
  WebsiteLayoutComponent.appendJsToShadowRoot(shadowRoot, 'assets/js/jquery.min.js');

Однако я могу подтвердить, что следующее делает

  WebsiteLayoutComponent.appendJsToShadowRoot(shadowRoot, 'assets/js/test.js');

, где содержание теста. js равно

alert('hello');

Довольно странно, что оно не работает для jquery и bootstrap, хотя я вижу их в HTML источник.

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...