Wrote: 2019/1/30
ReWrite: 2019/2/1

모티프

IE 11을 사용하여 실행되는 웹 Components에서는 HTML만 읽는 사람이라도 구성 요소를 간단하게 조립할 수 있습니다. 이렇게 하면 Happy!
더 스토리북으로 카탈로그를 하면 더 해피!
하지만 좌절만 있을 뿐이다.
세상에는 같은 환경이 많은 것 같은데, 여러분은 어떻게 하셨나요?알려주세요.

환경 & 필요조건

IE11에서 한 화면에 여러 개의 (300~500개 정도) 구성 요소를 설정한 사건이 여러 개 있다
그리고 구성 요소의 요구가 복잡하기 때문에 WebComponent화하고 싶습니다.
네트워크 정책에서 크롬, 엣지(and Firefox, Opera, Safari)는 모두 IE 11 이외에 금지된 환경이다.
사건 페이지를 구축하는 측(WebComponent를 사용하는 측)은 원래의 HTML로 구축되고 jQuery 등의 속박을 사용할 수 없다.
여러 부서에서 쓸 겸.
Ajax?저것은 무엇입니까?a. 맛있어요?
복잡한 일이 웹컴퍼니에 의해 덮였다
사용자가 텍스트 편집기(또는 HP 생성기)를 통해 구축할 수 있기를 바랍니다.
500개의 구성 요소의 표시는 한순간에 완성해야 합니다.

배경.

IE11은 2025년 10월까지 운영된다.
Windows OS별 Internet Explorer 지원 종료 시기: Tech TIPS-@IT
2025년 10월까지
Internet Explorer의 향후 – Japan IE Support Team Blog
특정 웹 사이트와 웹 애플리케이션에서 마이크로소프트 엣지와 호환성 문제가 발생했을 때(※)의 대응으로 기업 모델 사이트 일람을 활용해 인터넷 익스플로러 11로 자동 리디렉션하는 기능 등도 제공한다.

배경 환경

리액트, 베일, 앙글라, 구성 요소 지향이라고 하니 IE 11이 거기에 그림자를 던졌다.
크롬에서는 역동적이고요.
리액트가 구성 요소를 만드는 상황에서 유용하려면 유용한 곳이라도 리액트가 필요하고, 반대로도 마찬가지다.
아직 JS 프레임워크를 사용하지 않은 경우도 있습니다.(PHP, APS.NET, HTML만 해당)
이러한 환경에서 네트워크 Components에서 꿈을 꾸는 이야기.
↓이러한환경을상상하라
IE 11이 사라지지 않는 배경에는 아직도 낡은 HP 빌딩만 사용할 수 있는 환경이 남아 있어 IE 11에서 벗어날 수 없다(이하 자신
어쨌든 IE의 고난은 계속되고 있다.

실천하다

따라서 해피가 되기 위해 웹 컴포니스화를 목표로 한다.
다음은 한번 해 보았다.

React

React는 공식에서 사용할 수 있지만 이런 어감을 가지고 있다
Web Components – React
React를 적극적으로 사용해서 웹컴퍼니를 만드는 느낌은 아니다.서운하다
리액트에서 웹컴퍼니를 만들어 보는 프로젝트도 있는 것 같다.
spring-media/react-web-component: Create Web Components with React
그런데 계속 아무런 소식이 없으니 잠시 상황을 좀 볼 수 있을까요?
React 기반 프로젝트에 Webcomponents를 추가한 HowTo는 ↓에 포함됐다.
How to use Web Components in React

Riot

Rio는 가벼운 프레임이므로 WebComponent에 사용할 수 있습니다.
그래서 나는 리오로 조립품을 만들어 보았지만 IE11에 관해서는 미묘했다.
스토리북은 IE 11에서도 움직이지 않았다.(2019년 1월 기준)
Riot.js와 Storybook(IE 11은 동작이 없기 때문에 좌절&좌절)-Qita
이에 따라 IE 11에서 Rio가 문제 없이 작동할 때까지 보류했다.

Polymer

Polymer Project
IE 11도 움직일 수 있는 웹컴포렌츠라면 폴리머다.
IE11이 Polymer1에서 이동하는 것이 장점입니다.현재 Polymer3 릴리스가 완료되었습니다.(2019년 1월 기준)
나는 Polymer3을 시험해 보았다.

IE 11에서 Polymer 2.0 모바일 - Qita

Polymer element 1-Qita

Polymer element 2-Qita

2019년 1월 현재 HP에는 LitElement과lit-}이 표시됩니다.
색상도 회색으로 변하여 Maintenance로 표시됩니다.

장래의 시기라고 생각하고 있다
Vue-Col3에서 웹 Components를 제작할 수 있어 Vue로 바꿨다.

Vue

Build Target: web-component | Vue CLI 3
Vue-Col3에서 Web Components를 만들 수 있다는 말에 의기양양하게 시도해 봤다.

Vue CLI3을 사용하여 IE 11도 작동할 수 있는 웹 컴포니트를 만들어 보았습니다.

UI 프레임워크를 Vue-CI3에서 만든 WebComponents에 적용하고 IE 11의 -Qiita에 적용

UI 프레임워크를 Vue-CI3에서 만든 WebComponents에 적용하고 IE 11의 -Qiita에 적용

결론적으로 다음과 같은 문장에서 보듯이 IE 11은 IE 11을 지원하지 않기 때문에 안정적인 운행이 어렵다.
Note on Compatibility
Web Component mode does not support IE11 and below. More details
Note on Vue Dependency
In web component mode, Vue is externalized. This means the bundle will not bundle Vue even if your code imports Vue. The bundle will assume Vue is available on the host page as a global variable.
디스플레이 구성 요소 수가 적으면 문제없지만 수량이 늘어나면 디스플레이에 시간이 걸려 활용을 참을 수 없습니다.
고난의 소스는 아래에 남는다.
sugasaki/vue-cli3-webcomponent

Lit-Element

IE11 환경에 남아 있는 Web Components의 길은 Polymer만 있는 것 같습니다.
그럼에도 불구하고 Polymer는 유지보수 구역에 들어갔기 때문에Lit-Element에 들어가는 것이 좋습니다.
LitElement
Lit-Element은 Polymer 위에 존재하지만 IE11도 대응 목록에 들어갔다.
Polymer의 전망은 매우 미묘하다. 그렇다면, Lit-Element은 바로 그렇다.

LitElement> 속성 설명 - Qita

결실

Vue보다 성능이 조금 더 우수하며, Lit-Element은 디스플레이에도 시간이 걸립니다.
간단한 Hello World 500개를 표시하면 완료 전 약 2초 전이 표시됩니다.
약간 복잡한 이벤트가 포함된 500개의 구성 요소를 표시할 때 활동이 시작되기 약 20초 전입니다.
이것은 아마도 다른 곳에 원인이 있을 것이다.

vaadin

vaadin도 웹컴퍼니를 만들 수 있을 것 같아요.
구성 요소도 제공합니다.
Mobile optimized, themeable web components | Vaadin
DatePicker는 매우 매력적입니다.
HTML examples | Date Picker | Components | Vaadin
Ricto에서 사용하는 vaadin Web Components에 대한 설명이 좋습니다.
How to use Web Components

그리고 희망을 향해

혹시나 해서 IE 11 느린 렌더링 - Google 검색에서 검색해 봤어요.
그중에서 발견된 것은 이→Windows-IE11 동작이 굉장히 무거워요.
예컨대 테스트.그중<style>··</style>가 많습니까?
저도 푹 빠진 경험이 있어요.
WebComponents에는 각각 폐쇄된 ShoadowDOM과 스타일이 있습니다.
설마 스타일은 악의 근원??
몸매를 깎아 보았다.
빙고!!
지금까지 30초→1초 단축됐다.
LitElement, Polymer, Vue가 모두 속도를 높였다.
각자 극적인 연기를 시작했다.

새로운 고민이 있어요.

그럼 어떤 걸로 할까요?
사람마다 모두 장점과 단점이 있다.
Polymer가 성숙해지기 시작했는데, Lit Element이 후계자인 것 같다.
LitElement은 React에 가까운 문법이지만 PreRelease입니다.
베일도 이제 막 등장했다.
Vue는 다른 구성 요소를 사용하는 생태계가 매력적이다.
LitElement, 사용한 사람은 얼마나 됩니까???불안해.
앞으로도 계속 수사하겠다.