Создать и использовать пользовательский компонент HTML?

Question

Создать и использовать пользовательский компонент HTML?

У меня есть следующий местный HTML:

<html>

<head>
  <link rel="import" href="https://mygithub.github.io/webcomponent/">
</head>

<body>
  <!-- This is the custom html component I attempted to create -->
  <img-slider></img-slider>
</body>

</html>

и следующая попытка шаблона:

<template>
  <style>
      .redColor{
        background-color:red;
      }
  </style>
  <div class = "redColor">The sky is blue</div>
</template>

<script>
  // Grab our template full of slider markup and styles
  var tmpl = document.querySelector('template');

  // Create a prototype for a new element that extends HTMLElement
  var ImgSliderProto = Object.create(HTMLElement.prototype);

  // Setup our Shadow DOM and clone the template
  ImgSliderProto.createdCallback = function() {
    var root = this.createShadowRoot();
    root.appendChild(document.importNode(tmpl.content, true));
  };

  // Register our new element
  var ImgSlider = document.registerElement('img-slider', {
    prototype: ImgSliderProto
  });
</script>

Как описано в этой статье. Когда я запускаю код, я получаю:

Uncaught TypeError: Невозможно прочитать свойство 'content' с нулевым значением в HTMLElement.ImgSliderProto.createdCallback ((index):20)

Другими словами document.querySelector('template'); возвращает ноль. Что дает?

Моя цель - создать собственный HTML-элемент и отобразить его на веб-сайте, который ссылается на код шаблона. Я на 100% уверен, что правильно извлекаю код удаленного шаблона (очевидно, так как я получаю ошибку в этом коде).

PS Я использую последнюю версию Chrome, поэтому мне не нужны полифилы.

1

javascript html css templates web-component

Источник

user4977957 21 ноя '17 в 17:51

1 ответ

Решение

Другие вопросы по тегам javascript html css templates web-component

user1253074 21 ноя '17 в 17:56 2017-11-21 17:56 · Accepted Answer · 2017-11-21 17:56

Попробуй это:

  var tmpl = (document.currentScript||document._currentScript).ownerDocument.querySelector('template');

Проблема, с которой вы столкнулись, состоит в том, что шаблон на самом деле не является частью document но это часть currentScript, Из-за различий между браузерами и полифилов вам нужно проверить currentScript а также _currentScript работать правильно.

Также помните, что HTML-импорт никогда не будет полностью кросс-браузерным. Большинство веб-компонентов переходят на код на основе JavaScript и будут загружаться с использованием загрузки модуля ES6.

Есть вещи, которые помогают создавать шаблоны в файлах JS. Использование обратного ключа (`) является разумным способом:

var tmpl = document.createElement('template');
tmpl.innerHTML = `<style>
  .redColor{
    background-color:red;
  }
</style>
<div class = "redColor">The sky is blue</div>`;