왜 before-topic-progress 아웃렛이 <span>으로 감싸져 있나요?

모바일 타임라인 컨테이너에 콘텐츠를 추가하려고 했습니다.

이 컨테이너에는 두 개의 아웃렛이 있습니다.

before-topic-progressafter-topic-progress입니다.

before-topic-progress<span>으로 감싸져 있는데, 그 이유를 모르겠습니다. :thinking:

컨테이너는 인라인이 아니며, 이 아웃렛을 span으로 강제로 감쌀 이유가 보이지 않습니다. 명확한 목적이 없으면서도 자체 콘텐츠 레이아웃에 간섭을 일으킵니다. 예를 들어 버튼을 삽입하려고 하면 이 span 때문에 버튼이 다른 요소들의 높이에 맞출 수 없습니다:

image

이를 해결할 우아한 방법을 찾지 못했습니다. 가장 직접적인 방법은 다음과 같은 것을 사용하는 것입니다.

#topic-progress-wrapper > span:first-child {
    display: flex;
  }

하지만 여러 플러그인이나 컴포넌트가 동일한 아웃렛을 사용하는 경우, 부모 요소에 flex를 강제하면 다른 콘텐츠의 스타일이 깨질 수 있습니다(경우에 따라 다르겠지만요).

이 span에 목적이 없다면, 이 파일에서 제거할 수 있을까요?

네, 제 기억이 맞다면 이 스팬들은 아웃렛의 레거시 동작에 더 가깝기 때문에 추가된 것입니다. 경험하셨듯이, 이 스팬들은 방해가 될 수 있는 경향이 있어서 이미 사례별로 상당 수 제거했습니다.

여기서 처리될 예정입니다: