Lit-Element 웹 구성요소 내 스타일 재설정

사진 제공: Michele Blackwell on Unsplash

그래서 당신은 당신의 웹 컴포넌트에 대해 작업하고 있고 머지 않아 그것들이 물건을 캡슐화하는 데 정말로 능숙하다는 것을 깨닫게 됩니다. 그것이 목표입니다. 이 웹 구성 요소를 확인하십시오.



2개p개의 태그가 있습니다. 한편으로는 inner content가 포함된 Web Component 내부에 완전히 선언된 것이 있습니다.

...
render() {
  return html`
    <div>
      <p>Inner content</p>
    </div>
    <div>
      <slot></slot>
    </div>
  `
}
...

반면에 웹 구성 요소의 p 기능의 일부로 이동되는 본문의 일부로 선언된 slot 태그가 있습니다.

...
<div>
  <my-element>
    <p>Slotted content</p>
  </my-element>
</div>
...

p 태그에 대해 선언된 재설정 규칙이 있습니다.

p {
  margin: 0;
}

보시다시피 외부에서 선언된 p 태그는 스타일을 적용하고 여백 없이 안으로 이동합니다. 그러나 내부에 선언된 p는 페이지 스타일로부터 "보호"되므로 사용자 에이전트 스타일이라는 일반적인 취급을 받습니다. 그것이 그들이 다르게 보이는 이유입니다.

이 문제를 어떻게 해결합니까?

지금까지 이를 해결하는 방법은 단 한 가지뿐이라고 생각합니다. 웹 구성 요소 내에서도 재설정 스타일을 선언하는 것입니다. 웹 구성 요소에서 styles 정적 클래스 getter는 다음과 같습니다.

static get styles() {
  return css`
    div {
      border: 1px solid red;
    }
    p {
      margin: 0;
    }
  `;
}

업데이트된 펜은 다음과 같습니다.


해결되었죠? 글쎄, 그것은 작동하지만 이것은 최적과는 거리가 멀다. 첫째, 웹 구성 요소 자체 외부에 이 재설정 스타일이 있어야 다른 구성 요소 간에 재설정 스타일을 공유할 수 있습니다. 이 같은:

...
const resetStyles = () => css`
  p {
    margin: 0;
  }
`
...
static get styles() {
  return [
    resetStyles(),
    css`
      div {
        border: 1px solid red;
      }
    `
  ]
}
...

그러나 두 번째이자 더 중요한 것은 소프트웨어 개발의 좋은 경험 법칙입니다. 동일한 내용을 반복하지 마십시오.

우리는 여전히 스타일 재설정 스타일시트를 가지고 있습니다. reset.css 라고 부르겠습니다. 그리고 resetStyles() 에 의해 반환되는 재설정 스타일이 있는 객체가 있습니다. 즉, LitElement의 css 개체 및 독립 스타일시트로 재설정 스타일이 있습니다.

멋진 점은 재설정 스타일 시트를 갖는 것입니다.

어떻게 하죠?

LitElement가 스타일시트를 이해하는 방식으로 스타일시트를 처리하고 CSS 객체를 생성할 수 있습니다. 이를 수행하는 방법에는 여러 가지가 있으며 롤업을 예로 들어 보겠습니다.

롤업하자! 다음과 같은 간단한 구성을 사용합니다.

import litcss from 'rollup-plugin-lit-css'

export default {
  input: 'src/reset.css.js',
  plugins: [
    litcss({ uglify: true })
  ],
  output: {
    file: 'reset.css.lit.js',
    format: 'es'
  }
}

여기서 우리는 Rollup의 훌륭한rollup-plugin-lit-css 플러그인을 사용하고 있습니다.


.ltag__user__id__74157 .follow-action-button {
배경색: #29292e !important;
색상: #a6e22e !중요;
border-color: #29292e !중요;
}

베니 파워스 🇮🇱🇨🇦

Coding is as much a matter of personal growth as it is of logic and control-flow. I keep patience, curiosity, & exuberance in the same toolbox as vim and git. *Opinions posted are my own*




우리src/reset.css.js는 매우 간단합니다.

export { default } from '../reset.css'

그게 다야!

이제 LitElement에서 사용할 수 있습니다.

...
import reset from "./reset.css.lit.js";
const resetStyles = () => reset
...

이를 위해서는 CodePen보다 더 발전된 것이 필요합니다. Glitch와 voilá를 사용합시다! 이제 재설정 스타일이 기록되는 위치는 한 곳뿐입니다( reset.css ). 확인 해봐:

이 예에서 파일reset.css.lit.js이 롤업에 의해 생성되었음을 기억하십시오.

Minireset.css

this PR에서 minireset.css를 개선하고 다른 사람들이 LitElement 웹 구성 요소에서 사용할 수 있는 추가 LitElement 호환 파일을 제공하는 데 사용한 방금 설명한 것과 유사한 접근 방식입니다. minireset.css는 프로덕션 사이트에서 사용할 수 있는 훌륭하고 아주 작은 재설정입니다. 제가 권장하는 내용입니다. 확인해보세요.

https://jgthms.com/minireset.css/

프로젝트에 설치:

그런 다음 스타일을 재설정하려는 LitElement 웹 구성요소에서 스타일을 가져옵니다.

그런 다음 다음과 같이 배열 CSS 결과의 일부로 사용합니다.

또는 스타일에서 직접:

그것은 포장입니다!

이 글이 도움이 되었기를 바랍니다. 질문과 피드백을 환영합니다 🙂