Как да използвате HTML & С Shadow DOM
HTML слот е един от най-забележителните стандарти, направени от W3C. Комбинирайте това с друг впечатляващ стандарт W3C шаблони, и имате страхотна измислица, с която да работите. Да можеш създаване и добавяне на HTML елементи към страница използване на JavaScript е важна и важна задача.
Това е полезно, когато се налага кодов фрагмент се появяват само в определени часове, или когато не искате да изписвате стотици подобни структурирани HTML елементи, но искате да автоматизиране на процеса.
Създаването на HTML елементи в JavaScript е не е толкова желателно. Това е неприятност да проверявате и проверявате отново, ако сте покрили всички маркери, поставили ги в правилния ред, като цяло, има само също много да напишете и да следите. Но този смут, имам решение когато се появи маркер. Ако нещо трябва да бъде добавена към страницата динамично, можете да го поставите вътре
елемент.
В тази публикация ще ви покажа как можете да използвате
и етикети заедно с JavaScript създайте фабрика за мини HTML таблици които могат да създават и попълват стотици подобни таблици.
Най-
и
тагове
Най- таг притежава HTML код, че няма да се визуализира от браузърите докато правилно се добави към документа, използвайки JavaScript. Най-
е мястото, което добавите към Shadow DOM което може да бъде направено от съдържанието на. \ t елемент.
А Shadow DOM е подобен на обикновен DOM (моделът на документа е анализиран от HTML). То създава обсебено дърво (дърво на Shadow DOM), което има a свой собствен корен и може също да има a собствен стил.
Когато вмъкнете дървото Shadow DOM в елемент в основния документ - елементът ще бъде наречен хост в сянка -, всички дъщерни елементи на хоста в сянка, които са маркирани с прорез
атрибут (не е същият като посочения по-горе
маркер) заемат своето място в нововъведеното поддърво.

The Shadow DOM, както и при писането на тази статия (юли 2017), са поддържа се само в WebKit- и Blink-базирани браузъри но можете да проверите действителното състояние на поддръжката на браузъра в CanIUse по всяко време.
Създаване на HTML
Още ли е объркващо? Да видим някакъв код, започвайки с елемент.
Вътре Вътре в шаблона, Аз също добавих някои основни стилове за масата, използвайки Извън шаблона, има два всеки В момента всичко, което можете да видите на страницата, са текстовите низове, съдържащи се в участъците, така че трябва да добавим и JavaScript.. Използването на Javascript, ние вмъкваме таблицата от вътре в шаблона и в двете divs като дърво на Shadow DOM. След вмъкването участъците се поставят в съответните им слотове в таблицата и показват желаните заглавия на колони или стойности на клетките. Резултатът ще бъде две автоматично генерирани таблици които използват един и същ шаблон. Първо, трябва да проверим дали Shadow DOM се поддържа в браузъра на потребителя. Най- Създаваме персонализирана променлива, наречена Вътре Има две Тогава ние добавете копие от съдържанието на шаблона към дървото Shadow DOM, използвайки А динамичните ни HTML таблици са готови, ето как изглежда изходът в Chrome:, има
добре използване като план за създаване на таблици които ще бъдат добавени към документ. Има
елементи в клетките на таблицата ( и ) действа като заместители за заглавията на колоните и стойностите на клетките. Всеки слот има уникален име
приписват това идентифицира.
свободен край.
, за две отделни таблици, които искаме да добавим към страницата.
елемент има a
прорез
атрибут, чиято стойност е равно на име
стойност на съответстващите им
таг вътре .
Прикачване на дървото Shadow DOM
attachShadow ()
метод придава Shadow DOM дърво към елемент и връща коренния възел на това дърво Shadow DOM. Най- ако
условие в кода по-долу проверява дали браузърът поддържа този метод чрез тестване дали divs на страницата имат attachShadow
метод. // проверяваме дали Shadow DOM се поддържа, ако ('attachShadow' в document.createElement ('div')) else console.warn ('attachShadow не се поддържа');
templateContent
че служи за справка съдържанието на шаблона. if ('attachShadow' в document.createElement ('div')) нека templateContent = document.querySelector ('template'). съдържание; нека divs = document.querySelectorAll ('div'); divs.forEach (функция (div) // вътрешен цикъл); else console.warn ('attachShadow не се поддържа');
за всеки
цикъл, дървото Shadow DOM е прикрепен към всеки div (div.attachShadow (mode: 'open')
).вид
настроики за attachShadow
: отворен
и затворен
. ако затворен
бе избран коренният възел на дървото Shadow DOM ще стане недостъпен към външни DOM елементи и обекти.templateContent.cloneNode (истина)
метод. if ('attachShadow' в document.createElement ('div')) нека templateContent = document.querySelector ('template'). съдържание; нека divs = document.querySelectorAll ('div'); divs.forEach (функция (div) div.attachShadow (режим: 'отворен'). appendChild (templateContent.cloneNode (true))); else console.warn ('attachShadow не се поддържа');