Gridstack.js: Gridstack은 버전 2.0.0 이상에서`class = "grid-stack"`요소가 shadow-dom이있는 웹 컴포넌트 인 경우 작동을 중지했습니다!

에 만든 2020년 11월 03일 · 7코멘트 · 출처: gridstack/gridstack.js

Gridstack은 `class="grid-stack"` 요소가 shadow-dom이있는 웹 구성 요소 인 경우 버전 2.0.0 이상에서 작동을 중지했습니다!

이전에는 grid-stack 1.2.0 버전을 사용했으며 최상위 요소 (class = "grid-stack)가 웹 구성 요소이고 shadow-dom이있는 웹 구성 요소 내부에서 사용하고 있습니다. 2.0.0 버전으로 옮길 때까지 완벽하게! 최신 버전 인 2.1.0도 확인했지만 그 버전에서도 작동하지 않습니다!

당신의 환경

2.0.0 이상
Chrome 최신

재현 단계

<vi-dashboard id="dashboardEl" class="grid-stack">
  <vi-panel loc-x="0" loc-y="0" width="3" height="3" class="grid-stack-item">
       <div class="grid-stack-item-content></div>
  </vi-panel>
  <vi-panel loc-x="3" loc-y="0" width="3" height="3" class="grid-stack-item>
       <div class="grid-stack-item-content></div>
  </vi-panel>
</vi-dashboard>

위의 마크 업이 보이면 vi-panel과 vi-dashboard는 모두 웹 구성 요소입니다! 웹 구성 요소 인 vi-panel이 제대로 작동합니다! 그러나 vi-dashboard가 웹 구성 요소 인 경우 제대로 렌더링되지 않습니다! 콘솔에 오류가 없습니다!

예상되는 행동

일반 그리드 스택 데모로 제대로 렌더링되어야합니다!
Screen Shot 2020-11-03 at 3 06 16 PM

실제 행동

모든 것이 한 곳에 쌓여 있습니다! 끌어서 놓기 및 크기 조정도 작동하지 않습니다!

Screen Shot 2020-11-03 at 3 05 55 PM

bug

출처

bhutiyakishan1

👍1

가장 유용한 댓글

3.1.2에서 수정 됨 (3.1.1은 잘못된 디버그 기호 임)

adumesny 에 2020년 12월 07일

🎉2 👍1

모든 7 댓글

나에게 CSS 문제처럼 보이고 id가 동적으로 생성 한 문제를 행합니다 ... GridStack.init({styleInHead: true},...) 시도하고 그것이 상황을 바꾸는 지 확인 했습니까? (기본적으로 동일한 부모에 그리드 바로 앞에 CSS를 넣습니다.
그렇지 않다면 _updateStyles() 로 들어가서 CSS 파일을 생성 할 수 있는지 그리고 어디로 가는지 확인합니다.

또한 재현 가능한 케이스를 게시하지 않았습니다. 작은 zip 프로젝트가 있으면 좋을 것입니다. 그래서 디버그 할 수 있습니다.

adumesny 에 2020년 11월 03일

문제 재현 : https://codepen.io/bhutiyakishan1/pen/bGeKvgM
버전을 2.0.0 이상으로 변경하면 버그가 보입니다! 지금은 1.2.0으로 제작했습니다!
또한 나는 GridStack.init({styleInHead: true} 시도했지만 변경 사항이 없습니다!

bhutiyakishan1 에 2020년 11월 03일

👍1

폴리머 프로젝트에서도이 문제를보고 있습니다.

altonfroikin 에 2020년 11월 16일

문제를 보여주는 v3 예제 :

<html>
<head>
  <!-- Polyfills only needed for Firefox and Edge. -->
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
  <link rel="stylesheet" href="demo.css"/>
  <script src="../dist/gridstack-h5.js"></script>
</head>
<body>
  <script type="module">
    import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';

    class MyElement extends LitElement {
      static get properties() { return {} }
      render() {
        return html`<style>:host {display: block;} </style><slot></slot>`;
      }
    }
    customElements.define('my-element', MyElement);
</script>

<div class="grid-stack"></div>

<script type="text/javascript">
  let items = [
    {x:0, y:0, w:2, content: '0'},
    {x:0, y:1, content: '1'}
  ];
  let grid = GridStack.init();
  grid.load(items);
</script>
</body>
</html>

adumesny 에 2020년 12월 07일

@ bhutiyakishan1 이 문제를 발견했습니다 ... 분명히 그리드의 크기가 0이고 필요한 CSS를로드 / 생성하지 못했습니다. 지금이 작업을 수행하면 문제가 해결됩니다.

  let grid = GridStack.init({disableOneColumnMode: true, cellHeight: 70});

참고 : 코드에서 이것이 수행하는 작업과 사용 방법을 이해하지 못합니다 (인라인 블록으로 변경해도 크기가없는 그리드 문제가 해결되지 않았습니다).

render() { return html`<style>:host {display: block;} </style><slot></slot>`; }

adumesny 에 2020년 12월 07일

3.1.2에서 수정 됨 (3.1.1은 잘못된 디버그 기호 임)

adumesny 에 2020년 12월 07일

🎉2 👍1

감사합니다 ! 도움을 주셔서 감사합니다!

bhutiyakishan1 에 2020년 12월 17일

👍1

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Gridstack.js: Gridstack은 버전 2.0.0 이상에서`class = "grid-stack"`요소가 shadow-dom이있는 웹 컴포넌트 인 경우 작동을 중지했습니다!

Gridstack은 class="grid-stack" 요소가 shadow-dom이있는 웹 구성 요소 인 경우 버전 2.0.0 이상에서 작동을 중지했습니다!

당신의 환경

재현 단계

예상되는 행동

실제 행동

가장 유용한 댓글

모든 7 댓글

관련 문제

Gridstack은 `class="grid-stack"` 요소가 shadow-dom이있는 웹 구성 요소 인 경우 버전 2.0.0 이상에서 작동을 중지했습니다!