シャドウDOMを使わないLitElementでslot要素を使う方法
Lit、というかウェブコンポーネントには子要素を指定位置に再配置するためのslot 要素という機能があります。これはシャドウ DOM用のため、thisを返すcreateRenderRootメソッドを定義するなどして普通に DOM にレンダリングするようにしたLitElementでは機能しません……そのままでは。…
タグ: フロントエンド開発
RMWCとminifyの組みあわせでMDCのCSSが失われたときの対応方法
こんな現象に遭遇するのは私くらいかなあと思いながらメモ。 個人用勤怠記録 Web アプリWorking time aroundは次のサードパーティーライブラリ・ツールを利用しています。 UI キットにRMWC。React で Google 謹製 Web 向け Material Design CSS フレームワークMaterial Components for Web(以下 MDC)を利用可能にするコンポーネントライブラリで、MDC に依存 もともと使っていた Google 謹製の…
LitでVue.js 2.xコンポーネントを置き換えた話
Lit + Deno + Packup でお手軽に Web Components 定義で記した通りLitのコンポーネントが開発できるようになったので、前回の更新ではブログ部分のVue.js 2コンポーネントを Lit コンポーネントに置き換えて Vus.js 依存を解消しました。Lit の使いかたがすこしわかってきたので、把握した注意点をメモとして残しておきます。
Lit + Deno + Packupでお手軽にWeb Components定義
IE サポート終了でWeb Componentsもいよいよ実用フェーズかと Web Components 開発用ライブラリLitのドキュメントに目を通していて、これはDenoを使えばお手軽なのでは?とひらめき試してみたところあっけなく成功したので共有。
Parcel 2とJestを組みあわせるときはBabelの設定を分離する
Parcel は便利、でも Jest を使うなら……の続き。 バージョン 2 リリースまで長い停滞期間のあったParcel、最近は開発が活性化しています。 バージョン 2 になって取りあつかいがおおきく変わったのがBabelの設定。 presets での @babel/preset-env や @babel/preset-typescript 、 @babel/preset-react の指定は Babel の設定としては定番ですが、Parcel はこの指定があるとしつこく警告します。…
RMWCでMDC Reactを置き換える
地味に間欠的に開発を続けている個人用勤怠記録 Web アプリWorking time around、開発の停止した Material Component for React(MDC React)をいつまでも使い続けるのもなあ、ということでMDC Web on other frameworksで紹介されているRMWC: React Material Web Componentsに置き換えました。RMWC の日本語の情報はほとんど見かけないのでちょっとメモ。…
Parcelは便利、でもJestを使うなら……(追記あり)
working-time-aroundではバンドラーにParcelを採用しました。試してみたかった、設定作業はしないに越したことがない、というのがその理由。実際に試してみるとなんにも準備せずに実行できる手軽さは圧倒的ですね。手放しでほめたくなります……が、ちゃんと開発するにあたってはおおきな落とし穴が。 Jest使いはじめて気がついたのですが、Jest はbabelと協調して動くので、Parcel では不要な babel の設定も Jest 用に用意しないといけないのでした……だったら…
MDC React v0.15の全面採用は時期尚早(追記あり)
2020-01-19(Sun)追記: 昨年 11 月に MDC-React is no longer under active development と宣言されていました。アップデートされないと思ったらそういうことだったのか…… working-time-aroundでは UI ライブラリとしてMaterial Component for React(MDC React)を採用しました。バージョンは v0.15 とまだメジャーバージョンはリリースされていませんが、ベースとなるMaterial Component for the Webが今年二月に v1.0.0 リリース後 v3.2.0 まで順調に版を重ねているので問題なかろうと判断してのこと。しかしこれはちょっと時期尚早で、まだまだ気軽に使うというわけにはいきませんでした。以下覚え書き。…
Microsoft Edge Legacyのfetch API実装は2018年10月の時点では問題あり
2022-10-17(Mon)追記: 2018 年公開の本エントリの指摘対象はいわゆる Edge Legacy で Chromium ベースの 2022 年現在の Edge にはあてはまらないため、タイトルを「Microsoft Edge の fetch API 実装は現在のところ問題あり」から変更しました。 ここのところ業務ではしばらく Single Page Application(SPA)と Web API で構成された Web アプリケーションを開発しています。担当は主に SPA 側。最近は SPA も Internet Explorer のようなレガシーブラウザを相手にしなければ特に課題となるようなことはありません……とは残念ながらいかないのがつらいところ。問題になりがちなのはまたしてもマイクロソフト謹製のモダン(なはずの)ブラウザ、Edge です。…
Material Design Liteのiframe処理をecho.jsで最適化する
Material Design Lite(MDL)は画像その他のリソースの有無をチェックし、存在しないときは非参照の表示が表に出ないよう調整します。そもそもこの機能がありがたいかは議論の分かれるところだと思うのですが(指定ミスに気づかない可能性が高まりますし)、対象のひとつである iframe 要素では別の問題も生じます。読みこみが二回発生してしまうのです。iframe 要素の参照先は比較的重いコンテンツになるので、これはありがたくない動作です。本来なら MDL が解決の方策を用意すべきだと思うのですが、残念ながら v1.3.0 の時点ではそうなっていません。