कई डेवलपर्स सोच रहे हैं कि कस्टम तत्वों (या पॉलिमर तत्व) में कितना सुंदर गिरावट आनी चाहिए। यह उपयोग-मामले के लिए है जहां या तो पॉलीफिल का उपयोग नहीं किया जा रहा है, वेब घटक समर्थित नहीं हैं या जावास्क्रिप्ट बस बंद कर दिया गया है।कस्टम तत्व (या पॉलिमर तत्व) को गहराई से अपमानित करना
क्या किसी के पास यह विचार है कि यह कैसे किया जाना चाहिए?
मुझे लगता है कि यह उचित है। यह है कि अधिकांश (सभी नहीं) HTML तत्व काम करते हैं। अतीत से इस विस्फोट को देखें: http://code.tutsplus.com/tutorials/quick-tip-html5-video-with-a-fallback-to-flash--net-9982
दो प्रकार के कस्टम तत्व हैं जिन्हें हम आमतौर पर सुंदर गिरावट के लिए समर्थन जोड़ने में रुचि रखते हैं: कस्टम तत्व जो मूल HTML टैग और कस्टम तत्वों का विस्तार करते हैं जो नहीं करते हैं।
कस्टम एलिमेंट्स प्लेटफार्म में पहले से ही बेक किए गए तत्वों का विस्तार करने वाले तत्वों का समर्थन करते हैं (उदाहरण <button>, <input>)। ऐसा करने का एक तरीका is वाक्यविन्यास का उपयोग कर रहा है। इसलिए, यदि आप अंतर्निहित विस्तार कर रहे हैं, तो मुझे लगता है कि is वाक्यविन्यास का उपयोग करने के लिए <button is="my-button"> के रूप में सुगंधित गिरावट सुनिश्चित करने का सबसे प्रत्यक्ष तरीका है: <button is="my-button">।
जहाँ मैं यह अच्छी तरह से काम कर देख सकते हैं के कुछ उदाहरण हैं:
फैंसी इनपुट फ़ील्ड:
<input is="fancy-input" type="text" value="So fancy">
कस्टम वीडियो प्लेयर:
<video is="custom-player" src="amazeballs.mp4">
संगीत visualizers:
<audio is="music-visualizer" src="track.ogg">
इस तरह यदि कस्टम तत्व के बिना कोई ब्राउज़र is वाक्यविन्यास को समझ नहीं सकता है, तो विस्तारित तत्व अभी भी एक अपमानित अनुभव के साथ काम करना चाहिए।
कस्टम तत्वों के बारे में क्या है जहां आप एक विशिष्ट अंतर्निहित विस्तार नहीं कर रहे हैं? उदाहरण के लिए: <my-preload-animation>।
<my-preload-animation>
Loading...
</my-preload-animation>
कस्टम तत्व समर्थन के बिना एक ब्राउज़र HTMLUnknownElement, फ़ॉलबैक (एक लोड हो रहा है संदेश) के रूप में टैग की व्याख्या तो होगा:
एक दृष्टिकोण मैं यह करने के लिए ले जा रहा किया गया है लाइट डोम में वापस आने सामग्री निर्दिष्ट है अभी भी प्रस्तुत किया जा सकता है। सरल तत्वों के लिए काम करने के लिए यह (प्रकट होता है)।
अधिक जटिल लोगों के लिए (उदाहरण के लिए यदि आप अपने तत्व में <content>/<shadow> का उपयोग कर रहे हैं), तो जब मैं अपना कस्टम तत्व अपग्रेड करता हूं तो मैं स्क्रिप्ट के माध्यम से फ़ॉलबैक हटा देता हूं।