우선 Custom elements를 만들고 싶다
소개
나는 연구나 일로 Web Components에 관한 기술을 사용하고 있는 것은 아니고, 프로는 아닙니다만 「일단 사용해 보고 싶다!」라고 생각해 사용해 보았습니다.
본 기사는 「기술적인 것은 쫓는다고 해서, 일단 움직이는 것을 만들고 싶다!」라고 하는 사람용입니다.
일본어로 상당히, 기술적인 것을 알기 쉽게 정리해 주시고 있는 기사는 초보자를 위한 WebComponents 요약 에 있습니다. 「초보자용 WebComponents 정리」에서는 라이프 사이클 등에도 접하고 있습니다만, 본 기사는 HTML5의 태그를 페타페타 붙여, 하나의 Element를 만들어 보자! 라는 것입니다.
Qiita에, 이 앞서 계속할지 모르기 때문에, 자신의 웹사이트 에도 같은 내용을 쓰고 있습니다. 이쪽은, 앞으로 Webcomponents에 대한 지식이 늘어나면, 수시로 갱신해 정리해 가므로, 좋으면 참조해 주세요. 반대로 말하면, 이 기사는 오식이나 오류의 정정 이외는 쓰여지지 않습니다.
준비할 파일
사용할 파일은 다음 두 가지입니다. 적당한 디렉토리에 적절한 디렉토리 (이번에는 webcomponents로 하고 있습니다)를 작성해 주세요.
Custom Element는 모두 javascript로 기술합니다. 그 기술된 Custom Element를 HTML 파일로 이용하는 흐름입니다.
webcomponents/
|- index.html
|- example-template.js
코드와 해설
각 파일과 코드에 대해 설명합니다.
HTML 파일에서 중요한 것은 Custom Element를 당길 때 'defer'를 넣지 않으면 제대로 작동하지 않는다는 것입니다. javascript를 참조 할 때 반드시 넣으십시오.
index.html<!DOCTYPE html>
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<script type="text/javascript" src="./example-template.js" defer></script> <!-- Custom Elementを引っ張ってくる "defer" を書かないと動かない -->
<title>custom elements example</title>
</head>
<body>
<!-- Custom Elementの利用。nameTitleとplaceHolderは作成した新しい属性（Attribute） -->
<example-template nameTitle="Text form" placeHolder="Please type your name"></example-template>
<example-template nameTitle="Text form2" placeHolder="複数elementを使っても、きちんと別々に文字が入る。"></example-template>
</body>
</html>
example-template.jsclass ExampleTemplate extends HTMLElement {
constructor() {
// superは必ず一番最初に呼び出される。
super();
// これより下にCustom Elementに関する記述を行う
//shadow rootの作成。これが今回の一番上のノード（ルート）
const shadow = this.attachShadow({ mode: 'open' });
// 今回はひとまとまりをsectionで包む
const wrapper = document.createElement('section');
//* Sectionの下に並べるElementsの情報を入れていく *//
// h2タグ（タイトル）
const subtitle = document.createElement('h2');
const titleSub = this.getAttribute('nameTitle'); // nameTitleというAttributeの値を取得
subtitle.textContent = titleSub; // nameTitleの値をh2タグで表示
// form & input (テキストフィールド)
const formF = document.createElement('form');
const textField = document.createElement('input');
textField.setAttribute('type', 'text'); // inputのtype指定
textField.setAttribute('class', 'textField'); // classをtextFieldに
const contents = this.getAttribute('placeHolder'); // placeHolderというAttributeの値を取得
textField.setAttribute('placeholder', contents); // input(type=text)のplaceholderにplaceHolderの値を代入
formF.appendChild(textField); // formの下にtextFieldをネストする
// Shadow domにCSSを適用する
const style = document.createElement('style');
console.log(style.isConnected);
style.textContent = `
.textField {
width: 500px;
height: 300px;
}
`; //今回はtextFieldの幅と高さを指定した。
// shadow domを一番上にして、上で作ったものをネストしていく
// shadow |- style
// |- wrapper |- subtitle
// |- formF
shadow.appendChild(style);
shadow.appendChild(wrapper);
wrapper.appendChild(subtitle);
wrapper.appendChild(formF);
}
}
// 新しいElementの定義
customElements.define('example-template', ExampleTemplate);
실제로 표시되는 화면
요약
사용할 파일은 다음 두 가지입니다. 적당한 디렉토리에 적절한 디렉토리 (이번에는 webcomponents로 하고 있습니다)를 작성해 주세요.
Custom Element는 모두 javascript로 기술합니다. 그 기술된 Custom Element를 HTML 파일로 이용하는 흐름입니다.
webcomponents/
|- index.html
|- example-template.js
코드와 해설
각 파일과 코드에 대해 설명합니다.
HTML 파일에서 중요한 것은 Custom Element를 당길 때 'defer'를 넣지 않으면 제대로 작동하지 않는다는 것입니다. javascript를 참조 할 때 반드시 넣으십시오.
index.html<!DOCTYPE html>
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<script type="text/javascript" src="./example-template.js" defer></script> <!-- Custom Elementを引っ張ってくる "defer" を書かないと動かない -->
<title>custom elements example</title>
</head>
<body>
<!-- Custom Elementの利用。nameTitleとplaceHolderは作成した新しい属性（Attribute） -->
<example-template nameTitle="Text form" placeHolder="Please type your name"></example-template>
<example-template nameTitle="Text form2" placeHolder="複数elementを使っても、きちんと別々に文字が入る。"></example-template>
</body>
</html>
example-template.jsclass ExampleTemplate extends HTMLElement {
constructor() {
// superは必ず一番最初に呼び出される。
super();
// これより下にCustom Elementに関する記述を行う
//shadow rootの作成。これが今回の一番上のノード（ルート）
const shadow = this.attachShadow({ mode: 'open' });
// 今回はひとまとまりをsectionで包む
const wrapper = document.createElement('section');
//* Sectionの下に並べるElementsの情報を入れていく *//
// h2タグ（タイトル）
const subtitle = document.createElement('h2');
const titleSub = this.getAttribute('nameTitle'); // nameTitleというAttributeの値を取得
subtitle.textContent = titleSub; // nameTitleの値をh2タグで表示
// form & input (テキストフィールド)
const formF = document.createElement('form');
const textField = document.createElement('input');
textField.setAttribute('type', 'text'); // inputのtype指定
textField.setAttribute('class', 'textField'); // classをtextFieldに
const contents = this.getAttribute('placeHolder'); // placeHolderというAttributeの値を取得
textField.setAttribute('placeholder', contents); // input(type=text)のplaceholderにplaceHolderの値を代入
formF.appendChild(textField); // formの下にtextFieldをネストする
// Shadow domにCSSを適用する
const style = document.createElement('style');
console.log(style.isConnected);
style.textContent = `
.textField {
width: 500px;
height: 300px;
}
`; //今回はtextFieldの幅と高さを指定した。
// shadow domを一番上にして、上で作ったものをネストしていく
// shadow |- style
// |- wrapper |- subtitle
// |- formF
shadow.appendChild(style);
shadow.appendChild(wrapper);
wrapper.appendChild(subtitle);
wrapper.appendChild(formF);
}
}
// 新しいElementの定義
customElements.define('example-template', ExampleTemplate);
실제로 표시되는 화면
요약
<!DOCTYPE html>
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<script type="text/javascript" src="./example-template.js" defer></script> <!-- Custom Elementを引っ張ってくる "defer" を書かないと動かない -->
<title>custom elements example</title>
</head>
<body>
<!-- Custom Elementの利用。nameTitleとplaceHolderは作成した新しい属性（Attribute） -->
<example-template nameTitle="Text form" placeHolder="Please type your name"></example-template>
<example-template nameTitle="Text form2" placeHolder="複数elementを使っても、きちんと別々に文字が入る。"></example-template>
</body>
</html>
class ExampleTemplate extends HTMLElement {
constructor() {
// superは必ず一番最初に呼び出される。
super();
// これより下にCustom Elementに関する記述を行う
//shadow rootの作成。これが今回の一番上のノード（ルート）
const shadow = this.attachShadow({ mode: 'open' });
// 今回はひとまとまりをsectionで包む
const wrapper = document.createElement('section');
//* Sectionの下に並べるElementsの情報を入れていく *//
// h2タグ（タイトル）
const subtitle = document.createElement('h2');
const titleSub = this.getAttribute('nameTitle'); // nameTitleというAttributeの値を取得
subtitle.textContent = titleSub; // nameTitleの値をh2タグで表示
// form & input (テキストフィールド)
const formF = document.createElement('form');
const textField = document.createElement('input');
textField.setAttribute('type', 'text'); // inputのtype指定
textField.setAttribute('class', 'textField'); // classをtextFieldに
const contents = this.getAttribute('placeHolder'); // placeHolderというAttributeの値を取得
textField.setAttribute('placeholder', contents); // input(type=text)のplaceholderにplaceHolderの値を代入
formF.appendChild(textField); // formの下にtextFieldをネストする
// Shadow domにCSSを適用する
const style = document.createElement('style');
console.log(style.isConnected);
style.textContent = `
.textField {
width: 500px;
height: 300px;
}
`; //今回はtextFieldの幅と高さを指定した。
// shadow domを一番上にして、上で作ったものをネストしていく
// shadow |- style
// |- wrapper |- subtitle
// |- formF
shadow.appendChild(style);
shadow.appendChild(wrapper);
wrapper.appendChild(subtitle);
wrapper.appendChild(formF);
}
}
// 新しいElementの定義
customElements.define('example-template', ExampleTemplate);
요약
문의
실수나 「여기, 이러한 쪽이 좋다!」라고 하는 의견이나 「자세히 듣고 싶다!」라고 하는 것이 있으면, 이하의 메일 주소 또는 본 기사에 코멘트를 부탁합니다.
아키라. Kashihara @ Hot Mai l. 이 m
Reference
이 문제에 관하여(우선 Custom elements를 만들고 싶다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/AkiraKashihara/items/31ab1c5ab401d3b66231
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(우선 Custom elements를 만들고 싶다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/AkiraKashihara/items/31ab1c5ab401d3b66231텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
