如何使用Angular更改阴影DOM内嵌套子元件的样式

发布于 2025-01-19 22:15:29 字数 685 浏览 0 评论 0原文

我想更改包裹在父元素内部的子元素的字体样式，该父元素在内部被其他元素包裹，最后它被包含在影子根内。附加 DOM 树结构 -

我尝试通过以下代码进行更改

let host = document.querySelector(".fs-timescale-dd");
      // host.setAttribute('style','font-style:normal');
       let child= host.querySelector('.select');
       child.querySelector('.ng-select').querySelector('.ng-select-container')
       .querySelector('ng-value-container').querySelector('ng-placeholder')
       .setAttribute('style','font-style:normal');

但我'我收到 TypeError: Cannot read properties of null (reading 'querySelector')

我是 Angular 新手，有人可以帮忙吗？

原文

I want to change the font style of a child element which is wrapped inside a parent element which is internally wrapped by others and finally it is enclosed inside a shadow root. Attaching the DOM tree structure -

DOM structure description here

I tried making changes by following code

let host = document.querySelector(".fs-timescale-dd");
      // host.setAttribute('style','font-style:normal');
       let child= host.querySelector('.select');
       child.querySelector('.ng-select').querySelector('.ng-select-container')
       .querySelector('ng-value-container').querySelector('ng-placeholder')
       .setAttribute('style','font-style:normal');

But I'm getting TypeError: Cannot read properties of null (reading 'querySelector')

I'm new to Angular, can someone please help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌逼全场 2025-01-26 22:15:29

您尚未清楚地提到您的目标。阅读了您的问题后，我能理解的是，您想更改下拉列表选项的字体样式。如果是这样，您可以从以下示例中执行此操作。您可以直接选择要应用样式的类。

::ng-deep .some-class {
  font-style: normal;
}

You have not clearly mentioned your goal. After reading your question what I can understand is you want to change the font style of the options of the dropdown. If so you can do this from the following example. You can directly select the class on which you want to apply the style.

::ng-deep .some-class {
  font-style: normal;
}

回复收藏 0 原文

街角迷惘 2025-01-26 22:15:29

通过在其中添加类名来引用阴影dom元素来解决。
这样的东西 -

document.querySelector(".fs-timescale-dd").className('someName').shadowRoot.setAttribute("font","arial")

Solved by referencing the shadow dom element by adding a class name to it.
Something like this -

document.querySelector(".fs-timescale-dd").className('someName').shadowRoot.setAttribute("font","arial")

回复收藏 0 原文

江挽川 2025-01-26 22:15:29

您可以使用renderer2 + ViewChild来强制使用shadowRoot的child的样式。例如：

import { Component, ElementRef, Renderer2, AfterViewInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div class="fs-timescale-dd" #hostElement>
               <!-- Shadow DOM structure -->
             </div>`,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('hostElement', { static: false }) hostElementRef!: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit(): void {
    const host = this.hostElementRef.nativeElement;

    if (host) {
      // Apply class name
      this.renderer.addClass(host, 'someName');
      
      // Access the shadow DOM and set the font attribute
      const shadowRoot = host.shadowRoot;
      if (shadowRoot) {
        this.renderer.setAttribute(shadowRoot.host, 'font', 'arial');
      }
    }
  }
}

you can use renderer2 + ViewChild to force the styles of child with shadowRoot. E.g.:

import { Component, ElementRef, Renderer2, AfterViewInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div class="fs-timescale-dd" #hostElement>
               <!-- Shadow DOM structure -->
             </div>`,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('hostElement', { static: false }) hostElementRef!: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit(): void {
    const host = this.hostElementRef.nativeElement;

    if (host) {
      // Apply class name
      this.renderer.addClass(host, 'someName');
      
      // Access the shadow DOM and set the font attribute
      const shadowRoot = host.shadowRoot;
      if (shadowRoot) {
        this.renderer.setAttribute(shadowRoot.host, 'font', 'arial');
      }
    }
  }
}

回复收藏 0 原文

~没有更多了~