사용자 정의 요소 클래스 정의 후 수정

Question

사용자 요소/웹 구성 요소 클래스가 등록 된 후에 수정할 수 있습니까? 이것은 프로덕션 코드에서 일반적으로 (또는 지금까지) 수행 할 작업이 아니지만 개발을위한 코드 패칭 도구를 프로토 타이핑하거나 구현할 때 유용 할 것입니다. 여기에 지금까지 내가 실패, 시도했습니다 무엇 : 원래 CustomElementsRegistry에 전달 된 클래스는 아무런 영향을 미치지 않습니다 수정 요약에서

document.body.appendChild(document.createElement('foo-bar')) // empty element 

class FooBar extends HTMLElement { 
    connectedCallback() { 
    this.textContent = 'foo bar' 
    } 
} 

customElements.define('foo-bar', FooBar) // element shows "foo bar" 

FooBar.protoype.connectedCallback = function() { 
    this.textContent = 'foo bar 2' 
} 

document.body.appendChild(document.createElement('foo-bar')) // element shows "foo bar", not "foo bar 2" 

customElements.get('foo-bar').protoype.connectedCallback = function() { 
    this.textContent = 'foo bar 2' 
} 

document.body.appendChild(document.createElement('foo-bar')) // element shows "foo bar", not "foo bar 2" 

class FooBar2 extends HTMLElement { 
    connectedCallback() { 
    this.textContent = 'foo bar 2' 
    } 
} 

customElements.define('foo-bar', FooBar2) // Exception thrown, 'foo-bar' already defined 

. 레지스트리에있는 프로토 타입에 할당하는 것은 아무 효과가 없습니다. 예외가 발생하면 레지스트리의 요소에 새 클래스를 할당하려고 시도 할 수 없습니다. 이 세 가지 동작은 다른 모든 JavaScript API의 거의 모든 측면에 대한 나의 경험에 역행합니다. 더 좋든 나쁘 든간에 구성 할 수 없도록 설정하지 않는 한 무언가를 변경할 수 없도록하는 것은 매우 드문 경우입니다. 그러나 객체를 구성 할 수 있는지 검사 할 때 런타임에 나타납니다!

정의 된 요소 정의를 수정/보강하는 방법을 알고있는 사람이 있습니까?

Answer 1

나는 태그의 behaver를 바꾸는 것이 어려울 것이라고 생각한다. (브라우저 개발자) 한 태그는 한 번만 정의해야한다고 생각할 수도있다.

섀도우 루트를 수정하기 위해 테스트했는데, 효과가있었습니다. 사용자 정의 태그를 템플릿으로 만들려면 섀도우 루트가 도움이됩니다.

let customTable = document.registerElement('custom-table', { 
 
    prototype: Object.create(HTMLElement.prototype, { 
 
    createdCallback: { 
 
     value: function() { 
 
     let shadowRoot = this.createShadowRoot(); 
 
     window.shadowRoot = shadowRoot 
 
     let template = document.querySelector('#custom-table'); 
 
     shadowRoot.appendChild(template.content.cloneNode(true)); 
 
     } 
 
    } 
 
    }) 
 
}); 
 

 
let i = 0 
 
setInterval(() => { 
 
    shadowRoot.append(`${i++}s past `) 
 
}, 1000)

table { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: black; 
 
}

<template id="custom-table"> 
 
    <style> 
 
    table { 
 
    } 
 
    </style> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>P</td> 
 
     <td>P</td> 
 
     <td>A</td> 
 
     <td>P</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</template> 
 
<custom-table></custom-table> 
 
<table> 
 
</table>

사용 MVVM은 또한 템플릿 일을 할 수 있지만, 실시간 다시 쓰게

• 각 트리거 수동으로해야 할 수도 있습니다 수정 (타이프 라이터를 컴파일 필요) 반응
• 을, 또 다른 옵션입니다 (jsx, 컴파일 필요)
• 각도 1.x
• vue