웹 구성 요소에 대한 스타일링 옵션을 통해 생각합니다

웹 구성 요소에서 스타일을 어디에 넣습니까?

나는 우리가 여기서 그림자 dom을 나에게 사용하고 있다고 가정하고, 그것은 그것이 웹 구성 요소의 큰 추첨 중 하나입니다 : 플랫폼만이 플랫폼 만 할 수있는 독특한 강력한 일입니다. 따라서 이것은 웹 구성 요소의 스타일을 누출되지 않은 방식으로 정의하는 것입니다. 따라서 글로벌 스타일을 유출하는 방법이 적습니다 (매우 흥미 롭지 만 기사에서 나중에 볼 수있는 사용자 정의 속성을 통해 수행 할 수 있습니다).

템플릿 리터럴과 템플릿에 데이터를 잘 뿌릴 수있는 방법으로 인해 JavaScript 내부에 템플릿을 작성하는 경우 JavaScript의 해당 스타일에 액세스해야합니다.

 const 템플릿 =`
   $ {Styles} 
  <div>
    <h2 id="title"> $ {title} </h2>
    $ {content}
  </div>
`;;

그 스타일 변수는 어디에서 왔습니까? 어쩌면 템플릿 문자가 있습니까?

 const 스타일 =`
  :주인 {
    배경 : 흰색;
  }
  H2 {
    글꼴 : 900 1.5REM/1.1- 시스템 -UI, SANS-SERIF;
  }
`;;

나는 그것이 괜찮다고 생각하지만,이 웹 구성 요소를 구축하려는 클래스 어딘가에있는 큰 지저분한 코드 블록을 만듭니다.

또 다른 방법은

 <emplate>
  
    :주인 {
      배경 : 흰색;
    }
    H2 {
      글꼴 : 900 1.5REM/1.1- 시스템 -UI, SANS-SERIF;
    }
  스타일>

  <div>
    <h2> </h2>
    <p> </p>
  </div>
템플릿></emplate>

HTML에서 HTML을 유지하기 때문에 이것으로 호소력을 볼 수 있습니다. 내가 좋아하지 않는 것은 수동 Shadowroot.querySelector ( "#title-hook")를해야한다는 것입니다. InnerHtml = myData.title; 그 템플릿을 살리기 위해 노력하십시오. 편리한 템플릿처럼 느껴지지 않습니다. 나는 또한 당신이 당신의 HTML 어딘가에이 템플릿을 척해야한다는 것을 좋아하지 않습니다. 어디? 나는 몰라. 그냥 거기에 chuck. chuck.

CSS는 JavaScript에서도 옮겨졌지만 하나의 어색한 위치에서 다른 위치로 이동했습니다.

CSS 파일에 CSS를 보관하고 싶다면 다음과 같이 할 수 있습니다.

 <emplate>
  
    @import "/css/components/card.css";
  스타일>

  <div>
    <h2> </h2>
    <p> </p>
  </div>
템플릿></emplate>

(

이제 우리는 추가 HTTP 요청 인 @Import가 있으며 성능 히트로 악명 높습니다. 스티븐 램버트 (Steven Lambert)의 기사에 따르면 반으로 2 초 더 느려졌다 고 밝혔다. 이상적이지 않습니다. 대신 이것을하는 것이 훨씬 낫다고 생각하지 않습니다.

 클래스 mycomponent 확장 htmlelement {
    
  생성자 () {
    감독자();
    this.attachshadow ({모드 : "Open"});

    페치 ( '/css/components/card.css')
      . then (response => response.text ())
      . 그런데 (data => {
        let node = document.createElement ( 'style');
        node.innerhtml = data;
        document.body.appendChild (노드);
      });
  }

  // ...
}

그것이 잠재적으로 불안정 한 웹 시설 인 것처럼 보입니까? 나는 엉덩이에서 내려서 테스트해야한다고 생각합니다.

이제 이것을 다시 파고 들었으므로 :: 부분이 증기 (설명자)를 얻었습니다. 그래서 나는 할 수있다…

 const 템플릿 =`
  <div part="card">
    <h2 id="title"> $ {title} </h2>
    $ {content}
  </div>
`;;

… 그런 다음 글로벌 스타일 시트에 스타일을 작성하여 그 그림자 돔 내부에만 적용됩니다.

 my-card :: part (card) {
  배경 : 검은 색;
  색상 : 흰색;
}

… 브라우저 지원이 적용되었지만 충분하지 않습니까?

이 "부품"선택기는 연결된 정확한 요소 만 터치 할 수 있습니다. 모든 단일 DOM 노드에 부품 이름을 적용한 다음 각 스타일을 완전히 스타일링하여 모든 스타일을 수행해야합니다. 특히 Shadow Dom의 매력은 우리가 느슨한 CSS 선택기를 쓸 수있는이 고립 된 스타일 환경이기 때문에 우리의 H2 {} 스타일이 모든 곳에서 누출 될 것이라고 걱정하지 않기 때문입니다.

기본 CSS 모듈이 일이되면 가장 유용한 일이 될 것 같습니다.

 './styles.css'에서 가져 오는 스타일;

Class Myelement는 htmlelement {
  생성자 () {
    this.attachshadow ({모드 : Open});
    this.shadowroot.adoptedStylesheets = [Styles];
  }
}

그러나 이것이 어떤 종류의 성능 향상인지 확실하지 않습니다. 이것과 @import 사이의 세척 일 것 같습니다. 나는 기본 CSS 모듈의 선명도와 구문을 선호한다고 말해야합니다. JavaScript로 작업 할 때 JavaScript를 작성하는 것이 좋습니다.

구성 가능한 스타일 시트는 여러 구성 요소에서 스타일 시트를 공유하는 데 도움이됩니다. 그러나 CSS 모듈 접근 방식은 스타일 시트가 이미 그 시점에서 변수가 되었기 때문에 그렇게 할 수있는 것처럼 보입니다.

위 내용은 웹 구성 요소에 대한 스타일링 옵션을 통해 생각합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!