Возможно ли включить 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 источник.