@nakajmg 氏がWeb Components使うときにハマったポイント3つという記事を書いてて気になったので調べてたメモ。 Web Componentsを構成する中でコンポーネントのスタイリングをするのは往々にしてあるけど、それに<link>は使えないので<style>にCSSを書くしかなさ気な話。 Shadow DOMに<link>が入っているNGケース <template id="tmpl"> <link rel="stylesheet" href="x-element.css"> <div>This is x-element!</div> </template> <script> window.XElement = (function () { var doc = document.currentScript.ownerDocument; var XElementPrototy

Polymerに慣れたあとに、いざピュアなWeb Componentsでやろうとするとハマるかもしれないポイント。 document.registerElement()と<template>やらを使ってWeb Componentsを構成するときに、ライフサイクルコールバック中にそのテンプレートタグを当然参照すると思いますが、インポートをしているとコンテキストになるdocumentがずれる話。 コードで見たほうが早いと思われるので早速例を。 Polymerを使ってx-elementを作る場合 x-element.htmlの例。 <link rel="import" href="lib/polymer/polymer.html"> <polymer-element name="x-element" attributes="foo bar"> <template id="tmpl"> <div>

Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.