2013-02-11 3 views
13

오늘 이상한 것을 보았습니다. 게시물과 관련된 사진을보십시오 (아래). 나는 input [type = "text"]을 만들었습니다. 화면의 "1"입니다. 그것은 CSS 같아.그림자 입력 div 입력

table tbody input { 
    width: 40px; 
    border: none; 
    height: 16px; 
} 

일반 입력 외에는 테두리가 없습니다.

그런 다음 dev-tools를 살펴본 결과, 전에는 본 적이없는 것을 보았습니다. "# shadow-root"와 입력 안에있는 div.

나는 dev-tools가 원본 웹 페이지에 힌트를 표시하기 위해 뭔가를 추가한다는 것을 알고있다. 그러나, 나는 왜 이것이 입력 안에 div를 추가하는지 궁금해하며 실제로 웹킷 엔진에서 그런 것을 렌더링 할 수있는 방법은 무엇입니까?

지난번 Chrome 개발 도구는 이상하게 여겨졌습니다. 몇 가지 문제가있었습니다. 예를 들어 style.css 파일을 두 배로 만들었고 jquery 캘린더의 끔찍한 모습을 내 브라우저에로드했을 때만 다른 것을로드하는 것을 잊어 버렸습니다.

그것은 아마 버그,하지만 기능은 아니지만, 나는 그것이 그림자 DOM입니다

Input visible in browser (it's not straight, adhoc screen)

This input visible from the dev-tools side

답변

9

그것에 대해 더 알고 싶어요.

그냥 "표시 그림자 DOM에게"W3C의 초안 https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html

에서와 크롬에 관해서 찾을 수 있습니다

옵션 .. 참조 http://chemicaloliver.net/programming/inspecting-the-shadow-dom-in-google-chrome-inspector/

+0

안녕, 가지 말 여기에,하지만 난 문제가 어디 데 그림자 DOM (# shadow-root)이 bre을 추가하고 있습니다. 페이지 맨 위의 줄. 이미 그림자 DOM 옵션을 해제했는데, 어떤 아이디어입니까? – andufo

+0

@andufo 여기에서 설명하는 그림자 DOM은 개발자 도구만을 나타냅니다. 문제가 실제 HTML/CSS가 아닌 그림자 DOM에 있음을 어떻게 알 수 있습니까? –

+0

@ gaby-aka-g-petrioli 이미 여러 수표를 달렸는데, 확실히 Chrome에서만 발생합니다. 무언가가 – andufo

5
을 옵션에서 버튼을 클릭 해제

Gaby Petrioli가 지적했듯이, 이것은 그림자 DOM입니다. 타사 라이브러리 용으로 캡슐화 인터페이스를 HTML로 제공하기 위해 브라우저에서 생성됩니다.

캡슐화는 객체가 자체 데이터에 대한 액세스를 제한하여 제 3 자 코드가 임의로이를 지울 수 없도록하는 OOP 개념입니다.

HTML에는 제 3 자 라이브러리 (jQuery, 트위터 버튼 등)에서 특히 문제가되는 캡슐화 기능이 없습니다. 그림자 DOM은 으로 DOM의 다양한 하위 트리에 대한 기능적 캡슐화를 제공합니다. 이는 기능적 하위 트리를 문서 트리 (및 서로)와 분리하여 유지함으로써 성취됩니다. 이러한 그림자 DOM 하위 트리의 분리를 그림자 경계라고합니다. CSS 규칙 및 DOM 쿼리는 캡슐화를 제공하여 그림자의 경계를 교차하지 않으며 (1)

도미닉 쿠니가 말했듯이 :. 여기 가 하드 HTML과 자바 스크립트의 내장 위젯을 만드는 근본적인 문제입니다 사용 : 위젯 내부의 DOM 트리는 나머지 페이지에서 캡슐화되지 않습니다. 이러한 캡슐화 부족은 문서 스타일 시트가 실수로 위젯 내부의 부품에 적용될 수 있음을 의미합니다. 자바 스크립트가 실수로 위젯 내부의 부품을 수정할 수도 있습니다. ID가 위젯 내부의 ID와 겹칠 수 있습니다. 등등.(2)

더 읽을 거리 :

Basic introductory description of the Shadow DOM

(1) A more complete technical description - the second part of this article explains how to use the Shadow DOM yourself

(2) Dominic Cooney's article: Shadow DOM 101

Shadow DOM - W3C Working Draft 17 June 2014