Printing music with CSS grid
Printing music with CSS Grid Too often have I witnessed the improvising musician sweaty-handedly attempting to pinch-zoom an A4 pdf on a tiny mobile screen at the climax of a gig. We need fluid and responsive music rendering for the web! Stephen Band 24 Apr 2024 Music notation should be as accessible and as fluid as text is, on the web; that it is not, yet, is something of an afront to my sensibil
template 要素の shadowroot 属性による宣言的な Shadow DOM
2020.10.07 template 要素の shadowroot 属性による宣言的な Shadow DOM Shadow DOM は、代替要素を除いた任意の HTML 要素を DOM API で参照して attachShadow({ ... }) メソッドを呼び出すことで命令的に生成できる。これを新たに <template> 要素の shadowroot 属性によって、対象の HTML 要素の Shadow DOM を宣言的に生やせるようになる仕様が提案されている。既に Chrome 85 で試験的に実装されており、フラグ付きで利用できるようになっている。この記事は自分用にまとめたメモ。 Add declarative Shadow DOM features by mfreed7 · Pull Request #892 · whatwg/dom Add declarative Shad
ElementInternals and Form-Associated Custom Elements
In Safari Technology Preview 162 we enabled the support for ElementInternals and the form-associated custom elements by default. Custom elements is a feature which lets web developers create reusable components by defining their own HTML elements without relying on a JavaScript framework. ElementInternals is a new addition to custom elements API, which allows developers to manage a custom element’
ElementInternalsでWeb Componentの<input>をフォームと相性よく付き合わせる方法 - Qiita
はいさい！ちゅらデータぬオースティンやいびーん！ 概要 ElementInternalsを使い、Shadow DOMのWeb Componentsを<form>で使えるようにする方法を紹介します！ 背景 以前、Web Componentsの<slot>にLight DOMの非表示<input>を入れることで、Web Componentsをフォームで使う方法を紹介しましたが、実は、それと違った最新鋭の解決法があります。 それは、ElementInternalsをWeb Componentにつけて、Web Componentを丸ごと擬似<input>にする方法です。 以前の記事で作ったラジオインプットのコードを元にご紹介します。 https://qiita.com/tronicboy/items/b0008bcf43f3fd46d8c9 コード Light DOMのエレメントを削除し、Elem
BASEのノーコードはどのように実現されているのか？ - BASEプロダクトチームブログ
基盤チームの右京です。 BASE ではショップのデザインを誰でも簡単にできるような、いわゆるノーコードな機能を提供しています。 デザイン | BASE (ベイス) ネットショップを無料で簡単に作成 この記事では、そんなノーコードなシステムの裏側について、簡単にですが解説しています。 ショップページ配信の基盤システム ノーコードの前にまず BASE のショップページ(ShopFront と呼んでいます)がどのようなシステムかを知っておく必要があります。BASE のショップページは特定の URL にアクセスすると必要なデータをデータベースから取得し、テンプレートエンジンを使ってサーバーのプログラムで HTML を生成して返す、よくある伝統的な Web ページとして実装されています。ただし、ショップ毎にページのデザインは全く異なるため、1 つの固定のテンプレートを利用しているわけではなく、ショッ
SvelteではじめるWeb Components開発 - Qiita
はじめに あまり知られていないかもしれませんが、Svelteを使ってWeb Componentsを開発することができます。 本記事ではSvelteを使ってWeb Componentsを開発するやり方を紹介したいと思います。 Web Componentsとは webcomponents.orgから引用 Web Componentsは、WebプラットフォームAPIのセットで、WebページやWebアプリケーションで使用する、新しいカスタム、再利用可能な、カプセル化されたHTMLタグを作成することを可能にします。カスタムコンポーネントとウィジェットはWeb Componentsの標準に基づいて構築され、モダンブラウザで動作し、HTMLで動作するあらゆるJavaScriptライブラリやフレームワークで使用することができます。 Web Componentsは、既存のWeb標準をベースにしています。We
Introducing "Lit" for Web Components
概要 2021/04/22に新しいWeb Componentsライブラリ、Lit(Lit 2.0)がリリースされ、同日ローンチイベントもYouTubeで生配信されました。 それに伴いPolymer ProjectがLitに改名されロゴが刷新されました。 ウェブサイトも新しく公開されました。チュートリアルとPlaygroundが刷新され、非常に便利になりました。 実装は https://github.com/lit/lit に公開されています。 LitElementとlit-htmlのおさらい 旧Polymer Project（Lit 1.0）では、lit-html(HTMLテンプレートライブラリ)とLitElement(Web Componentsを実装するためのライブラリ)の2つのライブラリが提供されていました。 LitElementにもテンプレート機能があったので、2つとも独立したライ
Custom Elements Everywhere
Custom Elements Everywhere Making sure frameworks and custom elements can be BFFs 🍻 What's this? Custom Elements are the lynchpin in the Web Components specifications. They give developers the ability to define their own HTML elements. When coupled with Shadow DOM, Custom Elements should be able to work in any application. But things don't always work seamlessly. This project runs a suite of test
カラーミーショップの一機能をAngular Elementsで実装しました - Pepabo Tech Portal
EC事業部エンジニアの@ku00です。最近は原神の聖遺物厳選に励んでいます。 この記事はECブログリレーの12日目の記事です。11日目はぱーぽーによるグーペの漸進的なフロントエンド改善を振り返るでした。 カラーミーショップにはショップ運営を助ける機能が数多くありますが、その中でも特定のショップ向けの機能（以下「プラチナプラン機能」という）がいくつかあります。この記事ではこれらの機能のうちの一つをAngular Elementsで実装し直した話をします。 Angular Elementsとは Angular Elementsとは、AngularのコンポーネントをWeb Componentsとしてパッケージ化する機能のことです。Web Componentsはフレームワークに依存せずに新しいHTML要素を定義することができるため、Vue.jsなどの別のフレームワークに組み込むこともできます。An
Web components
Webコンポーネント(Web component)は、自己完結型のコンポーネント、つまり独自のプロパティとメソッドを持つカスタムHTML要素、カプセル化されたDOM、およびスタイルを作成するための一連の標準です。
Angular Elementsことはじめ – Custom Elementsを実装する方法
2018年5月4日にAngular 6がリリースされました。Angular 6は、Angular自体の機能というよりは、Angularをいかに使ってもらえるかというところに重点が置かれたリリース内容でした。その中の1つに、Angular Elementsという、Angularの利用を促進しそうな機能が新たに追加されました。詳細は記事内に書きますが、Angularで構築したコンポーネントを手軽に別のWebサイトで通常のHTMLのように扱えるCustom Elementsに変換する機能です。似たようなことがReactやVueでは既にできていて、Angularはずっと苦手としていた部分です。今回自分の勉強がてら、Angular Elementsの使い方をまとめてみました。参考にしてもらえればと思います。 目次 はじめに – Angular Elements とは Angular Elements
Angular v9 で Angular Elements(WebComponents 出力)を使う - Qiita
この記事は Angular アドベントカレンダー 2019 の11 日目の記事です。体調不良につき遅くなり申し訳ありません……。 はじめに Angular の WebComponents 出力である Angular Elements が搭載されたのが Angular v6 でのことなので、1年半になります。 今年は Setncil 1.0 がリリースされ、 lit-html での実装に比べ抽象度を高く保ちつつも、 pure WebComponents としての出力することができることから注目を浴びているように感じます。 Stencil での実装としても、 Angular の良い点である ShadowDOM + Sass を継承しており、 Component 単位で見ると Angular に通じる開発体験がある箇所もあります。 しかし Angular の出番が奪われたわけでは全くなく、やはり
AngularElementsでAMP htmlを動的にロードする - Qiita
本記事ではAngularElementsを使ってAMP htmlをロードするという試みをします。 AMPは、ページを高速に表示してSEOがよくなるやつですね。1 Angular Elementsについて ブートストラップ以下のツリーを通さず直接DOMにAngularComponentを追加できるようになるです。 ユースケースは1年前の記事でごちゃごちゃ書きましたが、相変わらず2つパラレルに走っています。 Angularアプリ内でElementsを使う方法 公式ドキュメントのサンプルが現在このユースケースです。Angularアプリ内で動的コンポーネントをどうやって実現するかという方向です。サンプルでは、AngularComponentでそのままやる方法と、customElementを用いる方法の2つが併記されています。 「サンプル: ポップアップサービス」 単発のcustomElements
「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！
「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 Safari 10.1からCustom Elementsが使えるようになったり、Microsoft EdgeもWeb Componentsの実装を約束していたりと、Web Componentsの足音は刻一刻と迫ってきています。 そんな時代に、Web開発はどう変わるのか？まずはCSS設計というところに着目して聞いてみたいと思い、先日「Web Components時代のCSS設計」という座談会を開催し、エキスパートの方々にお話を伺ってみました。 ゲストのエキスパート紹介 高津戸 壮さん 株式会社ピクセルグリッド フロントエンドエンジニア Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。スケー
Polymer library - Polymer Project
The Polymer library is in maintenance mode. For new development, we recommend Lit. The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be: Instantiated using a constructor or document.createElement. Co
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Shadow DOMとCSSの現状
Web Components Can Now Be Native Form Elements
20220815 - Something with Svelte
3 Approaches to Integrate React with Custom Elements | CSS-Tricks